Javascript 突出显示功能(mouseover/mouseout事件侦听器)不工作
我遵循了一些在线说明和一些关于突出显示单词的个人建议,但我没有得到任何东西来显示。我还应该提到,我在控制台中没有收到任何错误消息 下面是.js:Javascript 突出显示功能(mouseover/mouseout事件侦听器)不工作,javascript,function,dom,mouseover,event-listener,Javascript,Function,Dom,Mouseover,Event Listener,我遵循了一些在线说明和一些关于突出显示单词的个人建议,但我没有得到任何东西来显示。我还应该提到,我在控制台中没有收到任何错误消息 下面是.js: let createWordElems = function() { for (var i = 0; i <= 54; i++) { var singleWord = document.createElement('span') // creating 'p' element, calling it singleWord s
let createWordElems = function() {
for (var i = 0; i <= 54; i++) {
var singleWord = document.createElement('span') // creating 'p' element, calling it singleWord
singleWord.innerHTML = " " + shuffledWords[i]; // setting the content of the first word
singleWord.addEventListener("click", clickFunc);
// set onClick event for word
var giantArrayElement = document.querySelector('.giant-array') // selecting .giant-array and storing it in var
giantArrayElement.appendChild(singleWord); // appending singleWord to giantArrayElement
}
}
createWordElems();
///// ======== ////// HIGHLIGHT ///// ======== //////
function highlight() {
var selectSpan = document.querySelector('span')
selectSpan.addEventListener("mouseover", function(evt) {
evt.target.style.backgroundColor = "#ebce8e";
});
selectSpan.addEventListener("mouseout", function(evt) {
evt.target.style.backgroundColor = "#473611";
});
}
highlight();
.addEventListener
函数通常有点棘手,因为它通常只在元素完全加载时才起作用。为避免此问题,您应该将突出显示
函数置于
window.addEventListener('onload',function(){
//your function here
}
使您的东西正常工作。我在原始代码下面添加了一个更新。这就是你在window.add.etc行中添加highlight函数的意思吗?@Tsardines是的,这就是我的意思。还考虑将您的CREATEWORDELMS函数放入WiDOW.ADDEVENTENTENER中,因为它还包含一个ADVDETEN监听器。
window.addEventListener('onload',function(){
//your function here
}