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 中代码未定义。
我尝试在其他查询中搜索我的问题,但我无法理解它们,因为我自己并不是一个经验丰富的程序员。从我的观察来看,那些程序员缺少分号等等。
最佳答案
尝试将 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()}
仅当窗口正确加载时才会调用该函数。
关于javascript - JS 代码可以在控制台运行,不能像普通的 Web 代码一样运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24239731/