Question

HTML code：

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

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

只有在正确加载窗口时才会调用该函数。

JS代码在控制台中运行，不像普通的Web代码那样工作

1 个答案: