附加的事件偵聽器不工作

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>