如何实现HTML触发JavaScript完成数组姓名匹配弹窗功能

代码中的核心问题 #

• 变量获取时机错误：nameSelector在页面刚加载时就获取了输入框的值，此时输入框是空的，后续点击按钮时不会重新读取用户输入的内容，导致永远拿不到最新输入。
• 数组索引越界：数组names有3个元素，索引是0、1、2，代码里用了names[3]，这个位置没有任何值，所以输入Mike时永远走else分支。
• DOM加载顺序问题：脚本放在<head>里，页面加载时<body>还没渲染完成，document.getElementById('name-area')会返回null，直接取.value会触发错误。

修正后的代码 #

JavaScript（app.js）

var names = ['Alex', 'Dale', 'Mike'];

function nameGrabber() {
  // 点击按钮时才获取输入框的最新值
  var nameSelector = document.getElementById('name-area').value;
  
  if (nameSelector === names[0]) {
    alert("Nice Name bro.");
  } else if (nameSelector === names[1]) {
    alert("Mate, that's a name that you have.");
  } else if (nameSelector === names[2]) { // 修正索引为2
    alert("Ok that's fine.");
  } else {
    alert("PUT IN ONE OF THE NAMES PLEAZE... thanks :)");
  }
}

HTML

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Javascript Lesson</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <input type="text" id="name-area">
  <input type="submit" onclick="nameGrabber()">
  
  <!-- 把脚本移到body末尾，确保DOM加载完成后再执行 -->
  <script src="app.js"></script>
</body>
</html>

额外优化建议 #

可以加入首尾空格去除逻辑，避免用户输入空格导致匹配失败，同时用更简洁的方式判断索引：

var names = ['Alex', 'Dale', 'Mike'];

function nameGrabber() {
  var nameSelector = document.getElementById('name-area').value.trim();
  
  if (!nameSelector) {
    alert("请输入姓名");
    return;
  }
  
  const index = names.indexOf(nameSelector);
  if (index === 0) {
    alert("Nice Name bro.");
  } else if (index === 1) {
    alert("Mate, that's a name that you have.");
  } else if (index === 2) {
    alert("Ok that's fine.");
  } else {
    alert("PUT IN ONE OF THE NAMES PLEAZE... thanks :)");
  }
}

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