鼠标悬停时附加事件侦听器

Question

我对 Javascript 非常陌生，正在尝试将匿名函数附加到事件侦听器。该函数的作用是当mouseover第一个元素时，会根据第一个元素中文本的长度，在第二个元素中显示一条消息。

但是，当我将鼠标悬停在第一个元素上时，什么也没有发生。因为我是 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>