Is the input in the array? How to find out?

Question

Is the input in the array? How to find out?

I am currently facing an issue with a script that I have created to count array elements matching a user input. Strangely, all if statements in the script seem to be returning false.

I have verified that both the array element and the input value are strings, so I can't seem to pinpoint why this problem is occurring.

<!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>

javascript

Answer 1

Answer №1

const bloodCollection = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
const searchCriteria = document.getElementById("searchType");
const resultCounter = document.getElementById("count");

searchCriteria.addEventListener('input', function (event) {
    let count = 0;
    for (let index = 0; index < bloodCollection.length; index++) {
        if (bloodCollection[index] == event.target.value) {
            count++;
        }
    }
    resultCounter.textContent = count;
});

Answer 2

const bloodCollection = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
const searchCriteria = document.getElementById("searchType");
const resultCounter = document.getElementById("count");

searchCriteria.addEventListener('input', function (event) {
    let count = 0;
    for (let index = 0; index < bloodCollection.length; index++) {
        if (bloodCollection[index] == event.target.value) {
            count++;
        }
    }
    resultCounter.textContent = count;
});

Answer 3

Answer №2

You currently face three challenges.

At the moment, your code begins running immediately upon page load, even before the user has a chance to input a search string.
Your counting logic needs to be encapsulated within a callable unit of code (a function) so that it can execute at the appropriate time.
A "trigger" or event must be established for the count code to activate. In this case, it's set up with the change event, which triggers after the input value changes and focus on the control is lost (by hitting TAB).

Refer to the comments included below for further clarification:

<!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">
      
      // The prior code was assessing matches before any user input was made. An "event handler" needs to be implemented to run the code at the correct time:
      document.getElementById("searchType").addEventListener("change", count);

      // Consolidate all script within a function to be initiated after 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++;
         }
        }
        
        // Use .textContent instead of .innerHTML when working with non-HTML strings
        document.getElementById("count").textContent = n;
      }
      </script>
   </body>
</html>

This process can be simplified using the Array.forEach() method along with the JavaScript ternary operator.

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <div>
        <input type="text" id="searchType">(hit TAB after entering data)
      </div>
      <p id="count"></p>

      <script>
      // Retrieve DOM element references only 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) {
         // Remember to call .trim on input strings to remove leading and trailing spaces. Utilize the ternary operator in the following manner to streamline the statement:
         // condition ? true value : false value
         n = (type == input.value.trim()) ? n + 1 : n;
        });
        
        output.textContent = n;
      }
      </script>
   </body>
</html>

Answer 4

You currently face three challenges.

At the moment, your code begins running immediately upon page load, even before the user has a chance to input a search string.
Your counting logic needs to be encapsulated within a callable unit of code (a function) so that it can execute at the appropriate time.
A "trigger" or event must be established for the count code to activate. In this case, it's set up with the change event, which triggers after the input value changes and focus on the control is lost (by hitting TAB).

Refer to the comments included below for further clarification:

<!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">
      
      // The prior code was assessing matches before any user input was made. An "event handler" needs to be implemented to run the code at the correct time:
      document.getElementById("searchType").addEventListener("change", count);

      // Consolidate all script within a function to be initiated after 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++;
         }
        }
        
        // Use .textContent instead of .innerHTML when working with non-HTML strings
        document.getElementById("count").textContent = n;
      }
      </script>
   </body>
</html>

This process can be simplified using the Array.forEach() method along with the JavaScript ternary operator.

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <div>
        <input type="text" id="searchType">(hit TAB after entering data)
      </div>
      <p id="count"></p>

      <script>
      // Retrieve DOM element references only 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) {
         // Remember to call .trim on input strings to remove leading and trailing spaces. Utilize the ternary operator in the following manner to streamline the statement:
         // condition ? true value : false value
         n = (type == input.value.trim()) ? n + 1 : n;
        });
        
        output.textContent = n;
      }
      </script>
   </body>
</html>

Answer 5

Answer №3

To ensure that the script runs after the input text box has been filled out, you can add a click handler to a "search" button. Once the button is clicked, the code will execute in response to the 'click' event listener.

If you test the code snippet provided below and input AB+ into the designated box before clicking the search button, the result displayed should be 5, as anticipated:

<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>

Answer 6

To ensure that the script runs after the input text box has been filled out, you can add a click handler to a "search" button. Once the button is clicked, the code will execute in response to the 'click' event listener.

If you test the code snippet provided below and input AB+ into the designated box before clicking the search button, the result displayed should be 5, as anticipated:

<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>

Is the input in the array? How to find out?

Answer №1

Answer №2

Answer №3

Similar questions

Using Angular to pass an index to a pipe function

Copying a Pinia state Array without referencing it is not possible

Is it possible to use Koajs without needing to include the --harmony tag?

How can you effectively load shared header and panel HTML onto pages located in separate directories using jQuery Mobile?

What are the advantages of choosing express.js over Ruby on Sinatra?

I am looking for a way to transfer data collected from an input form directly to my email address without the need to open a new window. As of now, I am utilizing angular

The most efficient method for handling a vast amount of data in NodeJS

Identify dead hyperlinks on a webpage with the help of selenium webdriver while steering clear of links that

What is the best way to create a test for my Vue component using Jest?

Leverage videojs-vr within a Vue.js component

Removing unexpected keys during validation using Joi

Encountering a mixed content error in Internet Explorer 8 due to the Nivo slider jQuery?

What is the best way to serve individual static files in Express without revealing the entire "/static" directory?

Tips for incorporating the "build" directory into the Travis-CI build process and deployment of an npm module

Sending information to a jQuery UI Dialog

Retrieving JSON data by key through ajax does not show the expected output

How to achieve the wrapping functionality in ReactJS that is similar to

Datagrid in AngularJS does not update filters upon refresh

Issue encountered in loading css and js folders during the build of the Angular2 application due to the files not being found

Implementing dynamic props in Vue2 component by passing arbitrary named variables