angehängt Ereignis-Listener funktioniert nicht

Question

Ich bin sehr neu in Javascript und versucht, eine anonyme Funktion an einen Ereignis-Listener anzuhängen. Die Funktion besteht darin, dass bei der Mausbewegung über das erste Element eine Nachricht in dem zweiten Element angezeigt wird, abhängig von der Länge des Textes innerhalb des ersten Elements.

Wenn ich jedoch die Maus über das erste Element schwebe, passiert nichts. Da ich neu in JavaScript bin, bin ich mir nicht sicher, was ich falsch gemacht habe.

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

Um die text des Elements Sie textContent verwenden zugreifen. value ist für Eingänge.

Außerdem müssen Sie das nächste Element Geschwister auswählen, nicht nur den nächsten Geschwisterknoten.

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>