Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.03.2018, 09:36
Новичок на форуме
Отправить личное сообщение для BIOkefirchik Посмотреть профиль Найти все сообщения от BIOkefirchik
 
Регистрация: 29.08.2017
Сообщений: 5

Пожалуйста, помогите!
Привет ребят! Недавно начал изучать js и решил попрактиковаться и создать игру крестики нолики. Получился вот такой код:
<!DOCTYPE html>
<html>
	<head>
		<title>Example</title>
		<style>[css]
			* {
				margin: 0px;
				padding: 0px;
			}
			#body {
				width: 150px;
				height: 270px;
				border: 1px solid red;
				padding: 5px;
				margin: 50px 0px 0px 300px;
			}
			td {
				width:50px;
				height: 50px;
				border: 1px solid black;
				font-size: 35px;
				text-align: center;
			}
			#WhoseTurn {
				width: inherit;
				height: 35px;
				font-size: 25px;
				border: 1px solid blue;
				font-variant: small-caps;
				text-align: center;
				padding-top: 15px;
			}
			#messageArea {
	       width: inherit;
				 height:35px;
				 border: 1px solid blue;
				 text-align: center;
				 font-size: 25px;
				 padding-top: 15px;

			}
			.red {
				color: red;
			}
			.blue {
				color: blue;
			}[/css]
		</style>
		<script>[JS]
		var counter = 0;
		window.onload = init;
		function init() {
			var model = {
			locations: ["00", "01", "02", "10", "11", "12", "20", "21", "22"],
			hits: ["", "", "", "", "", "", "", "", ""],
			counter: 0,
		 showAnswer: function(eventObj) {
			 var obj = eventObj.target;
			 var id= obj.getAttribute("id");
			 console.log(obj.id);
			 var index = this.locations.indexOf(obj.id);
			 this.counter++;
				if(this.counter%2==0){
					this.hits[index] = "o";
					obj.innerHTML = "o";
				}else {
					this.hits[index] = "x";
					obj.innerHTML = "x";
				}
			}
		};
		var tds = document.getElementsByTagName("td");
		for(var i=0; i < tds.length; i++)
		tds[i].onclick = model.showAnswer;
		}
[/JS]
		</script>
	</head>
	<body>
		<div id = "body">
		<div id = "messageArea"></div>
		<table>
				<tr>
						<td id = "00"></td><td id = "01"></td><td id="02"></td>
				</tr>
				<tr>
						<td id = "10"></td><td id = "11"></td><td id="12"></td>
				</tr>
				<tr>
						<td id = "20"></td><td id = "21"></td><td id="22"></td>
				</tr>
			<table>
				<div id="WhoseTurn"></div>
			</div>
	</body>
</html>


Но он не работает. Не могли бы вы мне подсказать в чём проблема?

P.S. В консоли выводится "example.html:60 Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at HTMLTableCellElement.showAnswer".
Ответить с цитированием
  #2 (permalink)  
Старый 03.03.2018, 09:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,478

BIOkefirchik,
не плодите темы.
Ответить с цитированием
  #3 (permalink)  
Старый 03.03.2018, 09:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,478

BIOkefirchik,
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta charset="utf-8">
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      #body {
        width: 150px;
        height: 270px;
        border: 1px solid red;
        padding: 5px;
        margin: 50px 0px 0px 300px;
      }
      td {
        width:50px;
        height: 50px;
        border: 1px solid black;
        font-size: 35px;
        text-align: center;
      }
      #WhoseTurn {
        width: inherit;
        height: 35px;
        font-size: 25px;
        border: 1px solid blue;
        font-variant: small-caps;
        text-align: center;
        padding-top: 15px;
      }
      #messageArea {
         width: inherit;
         height:35px;
         border: 1px solid blue;
         text-align: center;
         font-size: 25px;
         padding-top: 15px;

      }
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
    </style>
    <script>

    window.onload = init;
    function init() {
      var model = {
      locations: ["00", "01", "02", "10", "11", "12", "20", "21", "22"],
      hits: ["", "", "", "", "", "", "", "", ""],
      counter: 0,
     showAnswer: function(eventObj) {
       var obj = eventObj.target;
       var id= obj.getAttribute("id");
       console.log(obj.id);
       var index = this.locations.indexOf(obj.id);
       this.counter++;
        if(this.counter%2==0){
          this.hits[index] = "o";
          obj.innerHTML = "o";
        }else {
          this.hits[index] = "x";
          obj.innerHTML = "x";
        }
      }
    };
    var tds = document.getElementsByTagName("td");
    for(var i=0; i < tds.length; i++)
    tds[i].onclick = model.showAnswer.bind(model);
    }

    </script>
  </head>
  <body>
    <div id = "body">
    <div id = "messageArea"></div>
    <table>
        <tr>
            <td id = "00"></td><td id = "01"></td><td id="02"></td>
        </tr>
        <tr>
            <td id = "10"></td><td id = "11"></td><td id="12"></td>
        </tr>
        <tr>
            <td id = "20"></td><td id = "21"></td><td id="22"></td>
        </tr>
      </table>
        <div id="WhoseTurn"></div>
      </div>
  </body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 03.03.2018, 09:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,478

Сообщение от BIOkefirchik
Не могли бы вы мне подсказать в чём проблема?
this!!!
Ответить с цитированием
  #5 (permalink)  
Старый 03.03.2018, 10:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,478

BIOkefirchik,
строка 75 пост №3
Цитата:
2) используя привязку контекста и каррирование -- .bind()
https://javascript.ru/forum/dom-wind...tml#post470583
Ответить с цитированием
  #6 (permalink)  
Старый 03.03.2018, 10:08
Новичок на форуме
Отправить личное сообщение для BIOkefirchik Посмотреть профиль Найти все сообщения от BIOkefirchik
 
Регистрация: 29.08.2017
Сообщений: 5

Именно где?
Ответить с цитированием
  #7 (permalink)  
Старый 03.03.2018, 10:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,478

Сообщение от BIOkefirchik
tds[i].onclick = model.showAnswer;
тут this будет tds[i] а не model
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите пожалуйста!!! igrovik Общие вопросы Javascript 40 10.04.2018 13:53
Пожалуйста помогите сделать проверку выполнения vk Dodik Общие вопросы Javascript 3 01.03.2013 14:49
Помогите пожалуйста разобраться со скриптом Shalty Opera, Safari и др. 1 21.01.2013 14:41
Пожалуйста помогите решить задачу на java alex01rus1991 Элементы интерфейса 9 26.11.2012 23:02
Помогите, пожалуйста! rzhsasha Ваши сайты и скрипты 2 20.07.2009 20:07