Question

＆＃13;

<html>
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <div class="container" id="main">
      <span id="turn">X first</span>
      <div class="box" id="box1"></div>
      <div class="box" id="box2"></div>
      <div class="box" id="box3"></div>
      <div class="box" id="box4"></div>
      <div class="box" id="box5"></div>
      <div class="box" id="box6"></div>
      <div class="box" id="box7"></div>
      <div class="box" id="box8"></div>
      <div class="box" id="box9"></div>
    </div>

    <button onclick="replay()">Play Again</button>
  </body>
  <script src="script.js">


  </script>

</html>

＆＃13;

＆＃13; 在div结构中显示游戏板而不是表格形式。游戏应该是3条水平线和3条垂直线

Answer 1

HTML文件中的

更改：

＆＃13;

 <span id="turnleft">Play X</span>
 <span id="turnright">Play O</span>

＆＃13;

到：

＆＃13;

<div id="turnleft">
  <span>Play X</span>
  <ul id="playerX-moves"></ul>
</div>
    
<div id="turnright">
  <span>Play O</span>
  <ul id="playerO-moves"></ul>
</div>

＆＃13;

添加CSS文件：

＆＃13;

ul
{
  margin-top:.2em;
  padding-left:1em;
}

＆＃13;

在Javascript文件中更改：

＆＃13;

document.getElementById("turnleft").textContent = "PLayerX moves in tile " + /[0-9]/.exec(this.id)[0];

document.getElementById("turnright").textContent = "PLayerO moves in tile " + /[0-9]/.exec(this.id)[0];

＆＃13;

到：

＆＃13;

var li =document.createElement("li");
li.textContent = "tile " + /[0-9]/.exec(this.id)[0]; 
document.getElementById("playerX-moves").appendChild(li);

var li =document.createElement("li");
li.textContent = "tile " + /[0-9]/.exec(this.id)[0]; 
document.getElementById("playerO-moves").appendChild(li);

＆＃13;

如何在JS中显示？

1 个答案: