![](/img/trans.png)
[英]Event Listeners - MouseOver, Mouseout, OnClick for HTML Rows
[英]Highlight function (mouseover/mouseout event listeners) not working
我遵循了一些在线说明以及有关突出显示单词的一些亲自建议,但是我还没有得到任何显示。 我还应该提到,我在控制台中没有收到任何错误消息。
这是.js文件:
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();
更新:
window.addEventListener('onload',function() {
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
函数通常有点棘手,因为它通常仅在元素完全加载后才起作用。 为避免此问题,应将highlight
功能放在
window.addEventListener('onload',function(){
//your function here
}
让你的东西工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.