为什么这个全局变量不起作用？它可以完美地用作局部变量

Question

我想让“myColor”变量成为全局变量，这样我就不必将它粘贴到每个函数中，但我无法让它工作。我怎样才能让它工作？非常感谢任何帮助。

var myColor = document.getElementById("colorSelect").value; //this global variable isn't working

function r1c1BackgroundColor() { // Isn't working 
    document.getElementsByClassName("tableBox")[0].style.backgroundColor = myColor;
}

function r1c2BackgroundColor() { // works fine
    var myColor = document.getElementById("colorSelect").value;
    document.getElementsByClassName("tableBox")[1].style.backgroundColor = myColor;
}

<tr>
<td id="r1c1" class="tableBox" onclick="r1c1BackgroundColor()"></td>
<td id="r1c2" class="tableBox" onclick="r1c2BackgroundColor()"></td>
<td id="r1c3" class="tableBox" onclick="r1c3BackgroundColor()"></td>

<!-- etc -->

Answer 1

你需要定义一个包含myColor值的元素，你还没有在代码中定义r1c3BackgroundColor！全局变量似乎可以正常工作，只要有一个元素可以从中获取它的值！

function r1c1BackgroundColor() { // Isn't working 
    myColor = document.getElementById("colorSelect").value;
    document.getElementsByClassName("tableBox")[0].style.backgroundColor = myColor;
}

function r1c2BackgroundColor() { // works fine
    myColor = document.getElementById("colorSelect").value;
    document.getElementsByClassName("tableBox")[1].style.backgroundColor = myColor;
}
function r1c3BackgroundColor() { // works fine
    myColor = document.getElementById("colorSelect").value;
    document.getElementsByClassName("tableBox")[2].style.backgroundColor = myColor;
}

<input id="colorSelect" value="#000000"/>
<table>
<tr>
<td id="r1c1" class="tableBox" onclick="r1c1BackgroundColor()">first</td>
<td id="r1c2" class="tableBox" onclick="r1c2BackgroundColor()">second</td>
<td id="r1c3" class="tableBox" onclick="r1c3BackgroundColor()">third</td>
</tr>
</table>

Answer 2

您的全局变量在文档首次加载时被设置，并且在用户填写输入时永远不会更新。

如果您不想每次都编写该代码，请将其设为函数：

function getMyColor() {
    return document.getElementById("colorSelect").value;
}

然后你可以在所有需要的地方调用它：

function r1c1BackgroundColor() { // Isn't working 
    document.getElementsByClassName("tableBox")[0].style.backgroundColor = getMyColor();
}

Answer 3

问题在于，您的全局变量在 ID 为 colorSelect 的元素附加到 DOM（即文档）之前执行。

所以，当你的全局变量右侧的表达式即 document.getElementById("colorSelect").value; 执行时会发生什么，它的值是未定义的，因此是全局变量 myColor 值变得等于未定义。所以无论你在哪里使用全局变量，它的值都是未定义的。

它在局部变量的情况下工作，因为函数即 r1c2BackgroundColor 在点击时被调用

<td id="r1c2" class="tableBox" onclick="r1c2BackgroundColor()"></td>

此时，id 为 colorSelect 的元素已附加到 DOM，因此局部变量值不会以未定义的形式出现，并且可以正常工作。

要解决这个问题，您可以使用文档的 readystatechange 事件和 readyState 属性。

结束，你可以做这样的事情。

var myColor;

document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    myColor = document.getElementById("colorSelect").value;
  }
}

function r1c1BackgroundColor() { 
    document.getElementsByClassName("tableBox")[0].style.backgroundColor = myColor;
}

function r1c2BackgroundColor() { 
    document.getElementsByClassName("tableBox")[1].style.backgroundColor = myColor;
}

希望对你有帮助！