JavaScript 切换按钮在 document.load 上未更改状态

Question

我想创建一些切换按钮。但是在下面的代码中，根据我的说法，按钮二的起始值是 'true' 并且在 document.load 上它应该自动改变。但是当运行时，它不会改变按钮状态。实际上，所有这些 HTML 文件都将在 C++ 程序中用作字符串，其中将从服务器检索按钮的起始值。

这是我的代码。如果您想建议新的逻辑，请这样做。 :-)

var st = [false, false, false];
document.onload = function WL(a) {
    st = [false, true, false]
    for (i = 0; i < 3; i++) {
        oof(i);
    }
};

function oof(a) {

    p = document.getElementById(a);
    cv = p.value;


    if (st[a] == false) {
        cv = p.value = p.innerHTML = "On";
        p.style.backgroundColor = "#4CAF50";
        st[a] = true;
        //  prc(a);
    } else if (st[a] == true) {
        cv = p.value = p.innerHTML = "Off";

        p.style.backgroundColor = "#f44336";
        st[a] = false;
        //  prc(a);
    }
}


function prc(b) {
    r = "?p=" + b;
    var a = document.createElement("form");
    a.setAttribute("method", "post");
    a.setAttribute("action", r);
    a.style.display = "hidden";
    document.body.appendChild(a);
    a.submit()
};

.b{background-color:#f44336;border:0;color:white;padding:15px 32px;text-align:center;display:inline-block;font-size:16px;margin:10px 0 10px 0; width: 100%; height: 200px}

.b:hover{background-color:#4caf50;}
.b:active{background-color:#008cba;}

<button class=b value=Off id=0 onclick="oof('0')">Off</button> <br />
<button class=b value=Off id=1 onclick="oof('1')">Off</button> <br />
<button class=b value=Off id=2 onclick="oof('2')">Off</button>

Answer 1

我做了一个简单的测试：

<html>
<head>
 <script>
  document.onload = console.log
 </script>
</head>
<body>
</body>
</html>

而且我发现，document.onload 永远不会触发。但是，window.onload 和 document.body.onload 一样有效。

就是说，您最好使用 addEventListener 而不是最佳做法：

<html>
<head>
 <script>
  window.addEventListener('load', console.log)
 </script>
</head>
<body>
</body>
</html>

Answer 2

我发现您的代码有 2 个问题：

尝试使用 window.onload 而不是 document.onload
您不应在 for 语句和要在循环中执行的代码块之间使用 ;。

因此，行：

for (i = 0; i < 3; i++); {

应该是：

for (i = 0; i < 3; i++) {

JavaScript 切换按钮在 document.load 上未更改状态

JavaScript toggle button not changing state on document.load

html

javascript

arrays

onload