Referring to childNodes (Javascript)

Question

The game in this example has a variable number of players. A score needs to be tracked for each player. The example managed to create the HTML needed, but I'm not sure how to reference each child. Here's the HTML:

var players=prompt("Number of players?",2);

oldNode = document.getElementById("scoreHolder");

for (x=1;x<players;x++) {
  newNode = oldNode.cloneNode(true);
  document.documentElement.appendChild(newNode); 
}

var c=document.getElementById("scoreHolder").childNodes;
c[1].style.backgroundColor = "yellow";
c[2].style.backgroundColor = "blue";

<div id="scoreHolder">Player 1 score: <span id="score">0<span></div>

This example turns part of the first line of HTML yellow, but does nothing with the other lines. How can I reference them so that I can update each player's score?

I want ask one question : Do you know from what index starts Array ? — xAqweRx, May 04 '15 at 08:51
@xAqweRx Player #1 is already in the DOM so it can be skipped. — JJJ, May 04 '15 at 08:53
I wanted to tell you, thar Array in JS starts form 0 index, not from 1 index. — xAqweRx, May 04 '15 at 08:54
@xAqweRx And I wanted to tell you that the program would not work correctly if you started looping from 0. — JJJ, May 04 '15 at 08:55
Yes, agreed that arrays start at 0. This isn't a typical case, though. Player 1 is already included. We need to add (length-1) elements. We could start counting at 1 or we could stop when we reach length-1. — Mike Risher, May 04 '15 at 08:59
@xAqweRx Click on the "Run code snippet" button. When it asks for the number of players, type "4" and press ok. You'll see 4 rows appear. Why do you think there is a problem? — JJJ, May 04 '15 at 09:00
@Juhana I'm telling that it's not correct to set manually backgorund elements with index 1 and 2 if you don't know how many of them will be added. — xAqweRx, May 04 '15 at 09:07

score 0 · Answer 1 · answered May 04 '15 at 09:02

<body>
    <!-- add name attribute -->
    <div id="scoreHolder" name="scoreHolder">Player 1 score: <span id="score">0<span></div>
</body>
<script type="text/javascript">
    var players=prompt("Number of players?", 2);

        oldNode = document.getElementById("scoreHolder");

        for (var x=1;x<players;x++) {
          newNode = oldNode.cloneNode(true);
          newNode.id="newId"+x; // reassign the new id
          document.documentElement.appendChild(newNode);    
        }

        // use getElementsByName
        var c=document.getElementsByName("scoreHolder");
        c[0].style.backgroundColor = "yellow";
        c[1].style.backgroundColor = "blue";
</script>

Thank you. I finally see blue showing up. I'll remember to use getelementsByName next time. I also notice the clever thing you did with adding new ids. — Mike Risher, May 04 '15 at 09:13

xAqweRx · Answer 2 · 2015-05-04T09:04:24.637

-1

For doing this use for loop :

for( var i = 0; i < c.length; i++ ){
   if( i%2 == 1 )
       node[i].style.backgroundColor = "yellow";
   else    
       node[i].style.backgroundColor = "blue";
}

Update I've made a mistake with indexes. try updated one

UPDATE 2

You have a problem with function document.getElementById("scoreHolder") - it returns only one element, so try add class to #scoreHolder and document.getElementsByClassName and delete ID from appended elements

edited May 04 '15 at 09:04

answered May 04 '15 at 08:53

xAqweRx

1,236
1
10
23

I tried out your code, but no blue shows up. Thanks for trying, though! – Mike Risher May 04 '15 at 08:59
I've made a mistake when wrote it. Try new one. – xAqweRx May 04 '15 at 09:00
1

This won't work because `getElementById()` only ever retrieves one element, not an array. – JJJ May 04 '15 at 09:01

Referring to childNodes (Javascript)

2 Answers2