javascript - 为 html 元素赋值并读取它

Question

我正在尝试制作井字游戏，仅基于 html、CSS 和纯 js。我已经有了游戏基础(有一个错误)，但是一旦有人赢了我就无法检测到。我决定使用 MagicSquare算法，但我不知道如何为每个 td 元素附加值。 Here你可以找到，我此刻所拥有的。我正在尝试制作类似 player += Number(target.value); 的内容，一旦其中一名玩家收集到 15 个，我就会停止游戏并显示消息。当然，这现在行不通了，所以你能告诉我一些好主意吗？一旦播放器生成点击事件，如何用 td 元素赋值，然后通过 js 读取它？

index.html

<table class="gameArea" onclick="myFunction(event)">
     <tbody>
         <tr>
             <td value=4></td>
             <td value="9"></td>
             <td value="2"></td>
         </tr>
         <tr>
             <td value="3"></td>
             <td value="5"></td>
             <td value="7"></td>
         </tr>
         <tr>
             <td value="8"></td>
             <td value="1"></td>
             <td value="6"></td>
         </tr>
     </tbody>
</table>

script.js

  var player1 = 0,
      player2 = 0,
      round = 0;

function myFunction(event) {
    var target = event.target;
    //target.className += "x";

    if(hasClass(target, "x") || hasClass(target, "y") ){
      alert("Taken");
      return;
    }

    if(round === 1){
      target.className += "x";
      player1 += Number(target.value);
      round = 0;
      console.log(target.value);
    } else {
      target.className += "y";
      round = 1;
      player2 += Number(target.value);
      console.log("Player 2: " + player2);
    }

    console.log(round);
  }

  function hasClass( elem, klass ) {
   return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
}

Answer 1

更改您的 HTML 以使用数据属性，如下所示:

<td data-value="3"></td>

然后您可以读取该值，如下所示:

player1 += parseInt(target.dataset.value, 10);

有关 MDN 的更多信息 here .