Uncaught TypeError: Cannot set property 'value' of undefined at HTMLInputElement.<anonymous> (index.html:66) [дубликат]

185

07 апреля 2018, 21:23

На данный вопрос уже ответили:

Почему асинхронная функция внутри цикла выполняет последнюю итерацию много раз? 2 ответа

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <!--nk rel='stylesheet' href='dist/style.css'>-->
    <title>main</title>
    <style type="text/css">
        .gameField {
            margin: 0px auto;
            margin-top: 80px;
            height: 600px;
            width: 600px;
            border: 1px solid black;
        }
        .gameField input{
            min-height: 200px;
            max-width: 200px;
            font-style: bold;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <header class="container">
        <h2>Игра крестики нолики</h2>
        <hr>
    </header>
    <div class="gameField container-fluid">
        <div class="row">
            <input type="button" class="col-md-4" id="1" value="1">
            <input type="button" class="col-md-4" id="2" value="2">
            <input type="button" class="col-md-4" id="3" value="3">
        </div>
        <div class="row">
            <input type="button" class="col-md-4" id="4" value="4">
            <input type="button" class="col-md-4" id="5" value="5">
            <input type="button" class="col-md-4" id="6" value="6">
        </div>
        <div class="row">
            <input type="button" class="col-md-4" id="7" value="7">
            <input type="button" class="col-md-4" id="8" value="8">
            <input type="button" class="col-md-4" id="9" value="9">
        </div>
    </div>
    <script type="text/javascript" defer>
        function start() {
            var step = true;
            var btn = new Array();
            for (var i = 0; i <= 8; i++) {
                btn[i] = document.getElementById(i.toString());
                if (btn[i]) {
                    btn[i].addEventListener('click', function(){
                        if (step) { str = 'X'; step = false;}
                        else { str = 'O';  step = true;}
                        btn[i].value = str;
                    }, true);
                }
            }           
        }
        start();

    </script>
</body>
</html>

Answer 1

Два исправления. Сами найдете или показать?

function start() { 
  var step = true; 
 
  var btn = new Array(); 
 
  for (var i = 0; i <= 8; i++) { 
    btn[i] = document.getElementById((i+1).toString()); 
    if (btn[i]) { 
 
      btn[i].addEventListener('click', function() { 
 
        if (step) { 
          str = 'X'; 
          step = false; 
        } else { 
          str = 'O'; 
          step = true; 
        } 
        this.value = str; 
 
      }, true); 
 
    } 
  } 
} 
 
start();

.gameField { 
  margin: 0px auto; 
  margin-top: 80px; 
  height: 600px; 
  width: 600px; 
  border: 1px solid black; 
} 
 
.gameField input { 
  min-height: 20px; 
  max-width: 200px; 
  font-style: bold; 
  font-size: 50px; 
}

<header class="container"> 
  <h2>Игра крестики нолики</h2> 
  <hr> 
</header> 
<div class="gameField container-fluid"> 
  <div class="row"> 
    <input type="button" class="col-md-4" id="1" value="1"> 
    <input type="button" class="col-md-4" id="2" value="2"> 
    <input type="button" class="col-md-4" id="3" value="3"> 
  </div> 
  <div class="row"> 
    <input type="button" class="col-md-4" id="4" value="4"> 
    <input type="button" class="col-md-4" id="5" value="5"> 
    <input type="button" class="col-md-4" id="6" value="6"> 
  </div> 
  <div class="row"> 
    <input type="button" class="col-md-4" id="7" value="7"> 
    <input type="button" class="col-md-4" id="8" value="8"> 
    <input type="button" class="col-md-4" id="9" value="9"> 
  </div> 
</div>

Вот еще в коллекцию:

Область видимости переменной Javascript

Создание сайта для доставки еды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как возвратить ответ с сервлета в запрашивающий JavaScript?

Классическое CRUD веб приложение с использованием JavaScript и классов javaНа пользовательской странице index

162

MySQL

Транслит при вносе данных в mysql

Есть необходимость вносить данные в БД на русском но, чтоб в таблицу они попадали уже транслитом на латинице

179

MySQL

MySQL - Как правильно связать таблицы?

Есть 2 таблицы - посты и комментарии к ним:

204

MySQL

объединить поля по древовидной выборке

Данным запросом, получаю дерево категорий, но есть еще столбец code, как на базе данного запроса, получить только объединенную строку code в порядке...

164