添付のイベントリスナーが機能しない

Question

私は非常にjavascriptに新しく、イベントリスナーに匿名関数をアタッチしようとしています。関数の機能は、最初の要素をマウスオーバーすると、最初の要素内のテキストの長さに応じて2番目の要素にメッセージが表示されるということです。

しかし、マウスを最初の要素に重ねると、何も起こりません。私は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>