javascript - JS 代码可以在控制台运行，不能像普通的 Web 代码一样运行

Question

HTML 代码:

<div class="color-box yellow left margin-right" id="yellow-box">Yellow</div>
<div class="color-box black left margin-right" id="black-box">Black</div>     
<div class="color-box green left margin-right" id="green-box">Green</div>
<div class="color-box orange left margin-right" id="orange-box">Orange</div>
<div class="color-box red left margin-right" id="red-box">Red</div>

JS代码:

function addListeners()
    var colorList = document.getElementsByClassName('color-box');
    for (var i=0; i<colorList.length; i++){
        colorList[i].addEventListener('mousedown', mouseDown, false);
        window.addEventListener('mouseup', mouseUp, false);
    }
}

我调用的其他函数(mouseDown、mouseUp)并不重要。上面的代码可以在控制台中运行，但作为正常的 Web 代码，该函数甚至不会进入 for 循环，因为 colorList 的长度为 0。

我尝试使用 console.log() 调试上述代码，并得出结论 colorList[0] 返回控制台中的第一个节点，但在正常的 Web 中代码未定义。

我尝试在其他查询中搜索我的问题，但我无法理解它们，因为我自己并不是一个经验丰富的程序员。从我的观察来看，那些程序员缺少分号等等。

Answer 1

尝试将 js 代码写在 body 标记的末尾

<script>
 //your code
</script>
</body>
</html>

或者你可以将其写在window.onload事件上

function addListeners() {
  var colorList = document.getElementsByClassName('color-box');
  for (var i=0; i<colorList.length; i++){
    colorList[i].addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);
  }
}
window.onload = function(){addListeners()}

仅当窗口正确加载时才会调用该函数。