1
    <!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>
0

1 ответ 1

2

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

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.