爲html元素指定值並閱讀它

Question

我正在嘗試製作tic tac toe遊戲，基於html，css，純js。我已經有了遊戲的基礎（有一個bug），但是一旦有人獲勝，我有問題要檢測。我決定使用MagicSquare算法，但我不知道如何給每個td元素附加值。 Here你可以找到，在這一刻我有什麼。我試圖製作類似player += Number(target.value);的東西，一旦一個玩家收集15個，我就停止遊戲並顯示消息。 Ofc，現在不起作用，所以你能告訴我一些好主意，如何用td元素賦值，並且稍後通過js讀取它，一旦玩家生成click事件？

的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> 

然後，您可以讀取該值，就像這樣。

Answer 2

在你具體情況下，你已經連接到該元素的信息：你有一個類， x或y，它告訴你誰標記了那個方塊。你可以簡單地使用它。

在一般情況下，有三種常見的方法：

1. 單獨的數據高速緩存，通過與該元素相關聯的元件的id或其他唯一標識符作爲關鍵字。這裏的想法是，您給元素唯一的ID，並將這些ID用作存儲元素數據的對象的鍵。

   這與元素（瀏覽器擁有DOM，畢竟不是我們的代碼）很好地分離，但存在即使元素被移除也保留對象中的條目的問題。

   ES2015解決這個問題通過加入WeakMap，這是一個圖，可以使用任何值（包括DOM對象參考），爲鍵，且僅保持弱（不防止它們被從內存中刪除鍵）。如果刪除了某個鍵，則該條目將從地圖中刪除。因此，在與本地WeakMap支持的瀏覽器（它不能正確地墊高/ polyfilled），一旦你有機會獲得一個元素，你可以這樣做：

   // Initializing the map: 
   const elementData = new WeakMap(); 
   // Adding an entry to it: 
   elementData.set(theElement, {my: "data"}); 
   // Getting an entry form it: 
   const data = elementData.get(theElement); 
   if (data) { 
       // It was there, use it... 
   } 
   

2. 的元素有關的數據直接存儲，作爲「 expando「屬性。一旦你有一個元素的引用（從getElementById，querySelector，或任何其他方式），你可以通過分配在其上創建一個屬性：

   ​​

   這是很好的聯繫在一起的元素，不需要一個單獨的數據緩存及其附帶的問題，當元素被清理時得到清理等。

   但存在的問題是現在我們正在將自己的屬性存儲在DOM元素上。這提高了與DOM自身使用的屬性或其他腳本使用的屬性相沖突的可能性，因此使用與其他腳本不太可能衝突的名稱很重要。

   另外，在現在已過時的IE版本中，帶有對象的expandos（例如上面）有可能阻止垃圾收集。

3. 對於字符串數據，使用元素as Keir points out上的data-*屬性。我沒有在我的原始列表中包括這個，因爲我正在考慮複雜的數據，但對於簡單的事情來說，這絕對是一種選擇。

的jQuery（v2和更早的版本）做的＃1和＃2的組合：它添加一個字符串expando屬性的元素，給它一個ID（一個簡單的字符串，以避免在目前已過時的版本問題IE），並使用單獨的數據緩存。在MDN here

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

更多信息：

Answer 3

首先，您使用td附加價值的方式是錯誤的。

應該

target.getAttribute('value') 

不

target.value 

另一個問題，我認爲是球員序列，

要檢查

if(round === 1){ 

但一輪的默認值= 0，所以我先玩的玩家2。您應該將round的默認值設置爲1或首先將其與0進行比較。

只需更新代碼https://jsfiddle.net/1c0dqk01/