附加的事件侦听器不工作

Question

我对JavaScript很陌生，正试图将匿名函数附加到事件侦听器。该函数的功能是，当鼠标悬停在第一个元素上时，将在第二个元素中显示一条消息，具体取决于第一个元素中文本的长度。

但是，当我将鼠标悬停在第一个元素上时，没有任何反应。因为我是JavaScript新手，所以我不确定我做错了什么。

function checkLength(event, minLength){ 
 
     var el, elementTwo; 
 
     el = event.target; 
 
     elementTwo = el.nextSibling; 
 
     
 
     if(el.value.length < minLength){ 
 
      elementTwo.innerHTML = "not enough"; 
 
     } else { 
 
      elementTwo.innerHTML = "enough"; 
 
     } 
 
    } 
 
    
 
    var elUserName = document.getElementById("one"); 
 
    elUserName.addEventListener("mouseover", function(event){ 
 
     checkLength(event, 5); 
 
    }, false);

<div> 
 
     <div id="one">Bob</div> 
 
     <div id="two"></div> 
 
    </div>

Answer 1

要访问您使用textContent元素的text。 value用于输入。

此外，您需要选择下一个元素兄弟，而不仅仅是下一个兄弟节点。

function checkLength(event, minLength){ 
 
     var el, elementTwo; 
 
     el = event.target; 
 
     elementTwo = el.nextElementSibling; 
 
     
 
     if(el.textContent.length < minLength){ 
 
      elementTwo.innerHTML = "not enough"; 
 
     } else { 
 
      elementTwo.innerHTML = "enough"; 
 
     } 
 
    } 
 
    
 
    var elUserName = document.getElementById("one"); 
 
    elUserName.addEventListener("mouseover", function(event){ 
 
     checkLength(event, 5); 
 
    }, false);

<div> 
 
     <div id="one">Bob</div> 
 
     <div id="two"></div> 
 
    </div>