为 html 元素赋值并读取它

Question

I'm trying to make tic-tac-toe game, basing just on html, CSS and pure js. I have already base of game (there is one bug), but I have problem to detect once someone wins. I've decided to use MagicSquare algorithm, but I don't have idea how to attach value to each td element. Here you can find, what I have at this moment. I'm trying to make something like player += Number(target.value); and once one of the players collect 15, then I stop game and display message. Of course, this doesn't work now, so can you advise me some good idea how to assign values with td elements and later read it via js, once player generate click event?

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

Change your HTML to use data attributes, like so:

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

You can then read the value, like so:

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

More info on MDN here .

Answer 2

In your specific case, you already have the information attached to the element: You have a class, x or y , which tells you who's marked that square. You can simply use that.

In the general case, there are three common approaches:

1. A separate data cache, keyed by an element's id or other unique identifier associated with the element. The idea here is that you give elements unique IDs, and use those IDs as keys into an object that stores the data for the element.

   This is nicely separated from the element (the browser owns the DOM, after all, not our code), but has the issue that entries in the object remain even if an element is removed.

   ES2015 addressed that issue by adding WeakMap , which is a map that can use any value (including a DOM object reference) as a key, and only holds the keys weakly (doesn't prevent them being removed from memory). If a key is removed, the entry is removed from the map. So in a browser with native WeakMap support (it cannot be correctly shimmed/polyfilled), once you have access to an element, you could do this:

    // 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. Storing the data directly on the element, as an "expando" property. Once you have a reference to an element (from getElementById , querySelector , or any other way), you can create a property on it just by assigning:

    theElement.__myExpandoProperty = {my: "data"};

   This is nicely tied to the element, doesn't require a separate data cache and the issues that come with it, gets cleaned up when the element is cleaned up, etc.

   But has the problem that now we're storing our own properties on DOM elements. This raises the possibility of colliding with properties the DOM itself uses, or other scripts use, so it's important to use a name that is extremely unlikely to conflict with something else.

   Separately, in now-obsolete versions of IE, expandos with objects on them (such as the above) had the potential for preventing garbage collection.

3. For string data, using data-* attributes on the elements as Keir points out . I didn't include this in my original list because I was thinking of complex data, but for simple things this is absolutely an option.

jQuery (v2 and earlier) does a combination of #1 and #2: It adds a string expando property to the element to give it an ID (a simple string to avoid issues on now-obsolete versions of IE), and uses a separate data cache.

Answer 3

First, the way you are getting the value attached with td is wrong.

It should be

target.getAttribute('value')

not

target.value

Another issue I think is player sequence,

You are checking

if(round === 1){

but default value of round = 0, so its the Player 2 who is playing first. You should set default value of round to 1 or compare it to 0 at first.

Just update the code https://jsfiddle.net/1c0dqk01/