的document.getElementById（ “＃”）;不工作

Question

我想替换：

var leadingZero = document.getElementById("leading-zero");

function checkValue() {
    if (remainingTime < 10) {
        leadingZero.style.display = "inline";
    } else {
        leadingZero.style.display = "none";
    }
}

..用这个：

.random {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 30px;
}

第一个代码块工作得很好但我不希望每次调用checkValue（）时都会访问DOM（每半秒一次）。这就是为什么我试图将对象（称为对象??）分配给名为leadingZero的变量。为什么这不起作用？

Answer 1

加载文档后实例化leadingZero：

var leadingZero;
document.addEventListener("DOMContentLoaded", function(){
     leadingZero = document.getElementById("leading-zero");
);

function checkValue() {
    if (remainingTime < 10) {
        leadingZero.style.display = "inline";
    } else {
        leadingZero.style.display = "none";
    }
}