Question

＆＃13;

    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();
}

＆＃13;

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

＆＃13;

在代码中你可以看到我写了一个＆＃34; clear（）＆＃34;应该将所有变量设置为null并删除按钮的innerHTML的函数。我如何通过他们的ID来改变所有按钮innerHTML？

Answer 1

您需要查看：

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 = " ";
        });
}

注意：

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

不会工作，因为你从querySelectorAll回来的东西不是一个数组，它是一个（非实时的）NodeList。

您也可以缩短此功能：

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(); }

使用window[]访问全局变量。

Answer 2

如果您尝试指定特定的ID，则可以使用数组并迭代它们

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

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

如何同时更改多个ID的内部html？

2 个答案: