JavaScript监听表单字段：鼠标悬停Div时根据字段状态显图问题排查

你的代码核心问题在于获取输入元素的方式错误，以及判断逻辑不符合需求：

• document.getElementsByName('ville') 返回的是HTML元素集合（而非单个输入元素），直接和null或空字符串比较永远为真，导致图片始终显示。
• 需求是「字段为空时显示图片，有内容时隐藏」，原逻辑的判断方向完全颠倒。

修正后的完整代码 #

<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onmousemove Event</h2>
<input class="form-control" type="text" name="ville" value="" id="ville" placeholder="" required="required" />
<div style="width: 200px; height: 100px; border: 1px solid black;" onmousemove="myFunction()" onmouseout="clearCoor()"></div>
<img id="myImgaa" src="" width="107" height="98">
<script>
function myFunction() {
  // 通过ID直接获取目标输入元素（唯一ID是最可靠的获取方式）
  const villeInput = document.getElementById('ville');
  // 去除首尾空格后判断输入是否为空，避免空格误判
  if (villeInput.value.trim() === '') {
    // 字段为空时显示图片
    document.getElementById("myImgaa").src = "https://www.w3schools.com/jsref/img_pulpit.jpg";
  } else {
    // 字段有内容时隐藏图片
    document.getElementById("myImgaa").src = "";
  }
}
function clearCoor() {
  // 若需要鼠标移出div时隐藏图片，可取消注释以下代码：
  // document.getElementById("myImgaa").src = "";
}
</script>
</body>
</html>

关键修改说明 #

• 替换元素获取方式：用document.getElementById('ville')直接定位输入元素，而非返回集合的getElementsByName。
• 修正判断逻辑：当输入值去除空格后为空时显示图片，否则清空图片地址。
• 增加trim()处理：避免用户仅输入空格时被误判为有内容。

内容的提问来源于stack exchange，提问作者pierre