获取HTML输入框值供JavaScript调用实现页面跳转的问题修复求助

问题原因 #

你的代码存在两个核心逻辑错误：

• 逻辑判断语法不符合JS规则：value === 'Hydrogen'||'H'||'1'的写法是错误的，逻辑或运算符||会独立判断两侧表达式的布尔值，非空字符串'H'、'1'本身为真值，所以这个判断条件永远返回true，第一个if分支会始终执行。
• 没有做分支互斥处理：你用了两个独立的if判断而非else if，哪怕第一个if已经执行了跳转逻辑，第二个if依然会运行，且同样永远返回true，最终跳转地址会被第二个if的逻辑覆盖，所以无论输入什么都会跳转到氦元素页面。

修复后的代码 #

推荐用数组includes方法简化多匹配条件的写法，同时提前缓存输入值避免重复读取DOM：

<body>
  <input id="search" placeholder="Search for an element">
  <button>Search</button> 
</body>
<script type="text/javascript">
  document.querySelector("button").addEventListener("click", function() {
    // 读取输入值并去除首尾空格，避免用户误输入空格导致匹配失败
    const inputVal = document.getElementById('search').value.trim()
    // 空输入直接返回不做处理
    if (!inputVal) return

    if (['Hydrogen', 'H', '1'].includes(inputVal)) {
      window.location.href='./elements/hydrogen.html'
    } else if (['Helium', 'He', '2'].includes(inputVal)) {
      window.location.href='./elements/helium.html'
    }
    // 后续新增其他元素的匹配规则，直接加else if分支即可
  })
</script>

可选优化建议 #

• 如果需要支持大小写不敏感匹配（比如用户输入hydrogen、h也能正常识别），可以将输入值统一转成小写再匹配：将输入值获取逻辑改为const inputVal = document.getElementById('search').value.trim().toLowerCase()，匹配数组调整为['hydrogen', 'h', '1']即可。
• 如果后续需要适配大量元素的匹配规则，推荐用映射表的写法维护更便捷，示例逻辑如下：

// 提前维护匹配内容和跳转地址的映射关系
const elementMap = {
  'hydrogen': './elements/hydrogen.html',
  'h': './elements/hydrogen.html',
  '1': './elements/hydrogen.html',
  'helium': './elements/helium.html',
  'he': './elements/helium.html',
  '2': './elements/helium.html'
}
// 统一转小写后匹配地址
const targetUrl = elementMap[inputVal.toLowerCase()]
if (targetUrl) {
  window.location.href = targetUrl
}

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