从 HTML 输入中获取值并用于 javascript 函数 [重复]答案

【问题标题】：Getting the value from an HTML input and use for javascript function [duplicate]从 HTML 输入中获取值并用于 javascript 函数 [重复]
【发布时间】：2021-09-20 21:02:36
【问题描述】：

我不是专业的编码员，我遇到的问题可能有一个非常简单的解决方法。
所以这是我到目前为止的代码。这是非常基本的。我正在尝试从 html 输入中获取代码，并使用它来执行 javascript。例如，如果一个人在输入中输入“Hydrogen”，我希望它把他们带到氢页面，但是如果他们输入“helium”，我想把他们带到氦页面。这是我编写的代码，但每次尝试时，无论我输入什么，它都会将我带到氦页面。谁能帮我解决这个问题。谢谢

<body>
  <input id="search" placeholder="Search for an element">
  <button>Search</button> 
</body>
<script type="text/javascript">
  document.querySelector("button").addEventListener("click", function() {        
    if (document.getElementById('search').value === 'Hydrogen'||'H'||'1') {
      window.location.href='./elements/hydrogen.html'
    }
    if (document.getElementById('search').value === 'Helium'||'He'||'2'){
      window.location.href='./elements/helium.html'
    }
 })
</script>

【问题讨论】：

保持可追踪性：分离你的 JS 和 HTML，并使用 <script src="...." async defer></script> 加载你的 JS，这样它在下载时不会阻塞主线程，并且不会 运行直到文档完成转换为 DOM。
这不是您与多个字符串进行比较的方式。 if (['Hydrogen', 'H', '1'].includes(document.getElementById('search').value))

标签： javascript

【解决方案1】：

因为在 JavaScript 中任何非空字符串都是truthy。所以像这样的条件总是是true:

document.getElementById('search').value === 'Hydrogen'||'H'||'1'

因为'H' 是一个非空字符串，所以被解释为“真”。

编程语言不是依赖人类直觉的自然人类语言。 编程语言中的所有内容都必须使用明确的逻辑明确定义。所以你的条件应该是：

document.getElementById('search').value === 'Hydrogen' ||
document.getElementById('search').value === 'H' ||
document.getElementById('search').value === '1'

也就是说，每个条件都经过全面且独立的测试，并针对逻辑 || 运算符测试结果。

您当然可以通过多种方式缩短它。例如：

['Hydrogen', 'H', '1'].includes(document.getElementById('search').value)

【讨论】：

【解决方案2】：

这边

const
  button = document.querySelector('button') 
, search = document.getElementById('search')
  ;
button.onclick = e =>
  {
  if (['Hydrogen','H','1'].includes( search.value ))
      window.location.href='./elements/hydrogen.html'
      
  if (['Helium','He','2'].includes( search.value ))
      window.location.href='./elements/helium.html'
  }

  <input id="search" placeholder="Search for an element">
  <button>Search</button>

【讨论】：