How to change the inner html of multiple id's all at once?

Question

    var box1 = null;
var box2 = null;
var box3 = null;
var box4 = null;
var box5 = null;
var box6 = null;
var box7 = null;
var box8 = null;
var box9 = null;
var player = "X";

function clear() {
    box1, box2, box3 , box4, box5, box6, box7, box8, box9 = null;
    document.querySelectorAll("#1, #2, #3, #4, #5, #6, #7, #8, #9").innerHTML = " ";
}
function checkWin() {
    if ((box1 == box2) && (box2 == box3) && (box1 != null)) {
        alert(box1 + " wins.");
    } else if ((box1 == box4) && (box4 == box7) && (box1 != null)) {
        alert(box1 + " wins.");
    } else if ((box1 == box5) && (box5 == box9) && (box1 != null)) {
        alert(box1 + " wins.");
    } else if ((box2 == box5) && (box5 == box8) && (box2 != null)) {
        alert(box2 + " wins.");
    } else if ((box3 == box6) && (box6 == box9) && (box3 != null)) {
        alert(box3 + " wins.");
    } else if ((box3 == box5) && (box5 == box7) && (box3 != null)) {
        alert(box3 + " wins.");
    } else if ((box4 == box5) && (box5 == box6) && (box4 != null)) {
        alert(box4 + " wins.");
    } else if ((box7 == box8) && (box8 == box9) && (box7 != null)) {
        alert(box7 + " wins.");
    } else {
    }
}
function buttonClick(button) {
    if (button == 1) {
        document.getElementById("1").innerHTML = player;
        if (player == "X") {
            box1 = "X"
            player = "O";
        } else {
            box1 = "O"
            player = "X";
        }
    } else if (button == 2) {
        document.getElementById("2").innerHTML = player;
        if (player == "X") {
            box2 = "X"
            player = "O";
        } else {
            box2 = "O"
            player = "X";
        }
    } else if (button == 3) {
        document.getElementById("3").innerHTML = player;
        if (player == "X") {
            box3 = "X"
            player = "O";
        } else {
            box3 = "O"
            player = "X";
        }
    } else if (button == 4) {
        document.getElementById("4").innerHTML = player;
        if (player == "X") {
            box4 = "X"
            player = "O";
        } else {
            box4 = "O"
            player = "X";
        }
    } else if (button == 5) {
        document.getElementById("5").innerHTML = player;
        if (player == "X") {
            box5 = "X"
            player = "O";
        } else {
            box5 = "O"
            player = "X";
        }
    } else if (button == 6) {
        document.getElementById("6").innerHTML = player;
        if (player == "X") {
            box6 = "X"
            player = "O";
        } else {
            box6 = "O"
            player = "X";
        }
    } else if (button == 7) {
        document.getElementById("7").innerHTML = player;
        if (player == "X") {
            box7 = "X"
            player = "O";
        } else {
            box7 = "O"
            player = "X";
        }
    } else if (button == 8) {
        document.getElementById("8").innerHTML = player;
        if (player == "X") {
            box8 = "X"
            player = "O";
        } else {
            box8 = "O"
            player = "X";
        }
    } else if (button == 9) {
        document.getElementById("9").innerHTML = player;
        if (player == "X") {
            box9 = "X"
            player = "O";
        } else {
            box9 = "O"
            player = "X";
        }
    }
    checkWin();
}

   

<body bgColor="black">
<center>
    <button onClick="buttonClick(1)" id="1"></button>
    <button onClick="buttonClick(2)" id="2"></button>
    <button onClick="buttonClick(3)" id="3"></button>
    <br>
    <button onClick="buttonClick(4)" id="4"></button>
    <button onClick="buttonClick(5)" id="5"></button>
    <button onClick="buttonClick(6)" id="6"></button>
    <br>
    <button onClick="buttonClick(7)" id="7"></button>
    <button onClick="buttonClick(8)" id="8"></button>
    <button onClick="buttonClick(9)" id="9"></button>
</center>
</body>

In the code you can see I have written a "clear()" function that is supposed to set all the variables back to null and to remove the innerHTML of the buttons. How would I go about changing all the buttons innerHTML by their ID's?

Possible duplicate : http://stackoverflow.com/questions/7304497/javascript-multiple-getelementbyids-in-one-call/7304535#7304535 — tforgione, Dec 16 '15 at 16:28
Find your items using classes not id's then you can group them — Liam, Dec 16 '15 at 16:28
[You don't need to use jquery for this anymore](http://stackoverflow.com/a/15396712/542251) @DragonRock — Liam, Dec 16 '15 at 16:29
In addition to Liam's tips, instead of using variables with the names box1, box2... you should use an array since it's the perfect opportunity to use one. — tomysshadow, Dec 16 '15 at 16:34
@Liam Yes, but not with ids. However, I agree that classes are the good thing to do. — tforgione, Dec 16 '15 at 16:36

score 1 · Answer 1 · answered Dec 16 '15 at 16:33

You need to look through:

function clear(){
        box1, box2, box3 ,box4, box5, box6, box7, box8, box9 = null;
        [].forEach.call(document.querySelectorAll("#1, #2, #3, #4, #5, #6, #7, #8, #9"), function(el){
                el.innerHTML = " ";
        });
}

NOTE:

document.querySelectorAll("#1, #2, #3, #4, #5, #6, #7, #8, #9").forEach(function() {

});

wont work that's because what you get back from querySelectorAll isn't an array, it's a (non-live) NodeList.

And also you can shorten this function as well:

function buttonClick(button) {
  document.getElementById(button).innerHTML = player;
  if (player == "X") {
    window["box"+button] = "X"
    player = "O";
  } else {
    window["box"+button] = "O"
    player = "X";
  }

  checkWin();

}

Use window[] to access global variables.

score 0 · Answer 2 · answered Dec 16 '15 at 16:35

If you are trying to specify specific ids you can use an array and iterate through them

let ids = ['1','2','3'];
clear(ids);

let clear= function (ids) {
  let i;
  for (i = 0; i < ids.length; i++) {
    document.getElementById("id").innerHTML ='';
  }
}

How to change the inner html of multiple id's all at once?

2 Answers2