Question

我有一个简单的脚本，可以计算与输入匹配的数组元素的数量，但是似乎每个if语句都返回false。

我检查了两者（数组元素和输入值）是否均为字符串。只是无法弄清楚为什么它返回false。

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <div>
        <input type="text" id="searchType">
      </div>
      <p id="count"></p>

      <script type="text/javascript">

      var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
      var n = 0;

      for (var i = 0; i < bloodTypes.length; i++) {
         if (bloodTypes[i] == document.getElementById("searchType").value){
            n++;
         }
      }
      document.getElementById("count").innerHTML = n;
      </script>
   </body>
</html>

Answer 1

var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var searchInput = document.getElementById("searchType");
var countElement = document.getElementById("count");

searchInput.addEventListener('input', function (e) {
    var n = 0;
    for (var i = 0; i < bloodTypes.length; i++) {
        if (bloodTypes[i] == e.target.value) {
            n++;
        }
    }
    countElement.textContent = n;
});

Answer 2

您遇到了三个问题。

页面加载后，您的代码会立即运行，即在用户有机会输入搜索字符串之前。
您的计数代码必须绑定到一个可调用的代码单元（一个函数）中，以便可以在适当的时间作为一个单元运行。
您必须为计数代码设置一个“触发器”（事件）。在这个例子中下面是change事件，该事件发生在输入已更改并且对控件的焦点丢失（只需按TAB 输入一个输入值后）。

有关更多详细信息，请参见下面的内联评论：

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <div>
        <input type="text" id="searchType">(hit TAB after entering data)
      </div>
      <p id="count"></p>

      <script type="text/javascript">
      
      // Your old code was testing for matches before the user had a chance to
      // input anything. You need to set up an "event handler" that will call
      // your code at the right time:
      document.getElementById("searchType").addEventListener("change", count);

      // You must gather up all this code into a function that can be called 
      // after there has been some search input
      function count(){
        var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
        var n = 0;

        for (var i = 0; i < bloodTypes.length; i++) {
         if (bloodTypes[i] == document.getElementById("searchType").value){
            n++;
         }
        }
        
        // Only use .innerHTML when the string you are working with contains HTML
        // that needs to be parsed. When it's not HTML, use .textContent.
        document.getElementById("count").textContent = n;
      }
      </script>
   </body>
</html>

现在我们已经开始使用它，可以使用Array.forEach()方法和JavaScript ternary运算符以更简单的方式完成此操作。

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <div>
        <input type="text" id="searchType">(hit TAB after entering data)
      </div>
      <p id="count"></p>

      <script>
      // Get references to DOM elements just once:
      let input = document.getElementById("searchType");
      let output = document.getElementById("count");
      
      input.addEventListener("change", count);

      function count(){
        var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
        var n = 0;

        bloodTypes.forEach(function(type) {
         // Always call .trim on input strings. It strips off leading and 
         // trailing spaces that the user might have inadvertently added.
         // The following uses the JavaScript "ternary" operator, which is a 
         // way to write a simple if/then/else statement. It works like this:
         // condition ? true value : false value
         n = (type == input.value.trim()) ? n + 1 : n;
        });
        
        output.textContent = n;
      }
      </script>
   </body>
</html>

Answer 3

您需要在填写输入文本框后运行该脚本。例如，如果添加一个“搜索”按钮，并为其添加一个单击处理程序，则可以在“单击”事件侦听器中为搜索按钮执行代码。

如果运行下面的代码段，然后在框中输入AB+，然后然后单击搜索按钮，则会得到5 ，如预期：

<div>
  <input type="text" id="searchType">
  <button id="search">Search</button>
</div>
<p id="count"></p>

<script type="text/javascript">

document.getElementById('search').addEventListener('click', () => {
  var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
  var n = 0;

  for (var i = 0; i < bloodTypes.length; i++) {
     if (bloodTypes[i] == document.getElementById("searchType").value){
        n++;
     }
  }
  document.getElementById("count").innerHTML = n;
});
</script>

如何检查是否在数组中找到输入？

3 个答案: