时间戳

首页 > 解决方案 > 从 HTML 输入中获取值并用于 javascript 函数

javascript - 从 HTML 输入中获取值并用于 javascript 函数

问题描述

我不是专业的编码员，我遇到的问题可能有一个非常简单的解决方法。
所以这是我到目前为止的代码。这是非常基本的。我正在尝试从 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>

标签： javascript

解决方案

因为任何非空字符串在 JavaScript 中都是真实的。所以像这样的条件将永远是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)

推荐阅读