Показать сообщение отдельно
  #3 (permalink)  
Старый 03.03.2018, 10:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием