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

Select the five previous siblings in reverse order using jQuery's slice method

Preventing Click Events from Firing During Drag in JavaScript

Looking for an uncomplicated SSO system similar to Google Identity Toolkit but with a customizable UI interface?

Having trouble with uploading an image in Laravel using a modal?

Is it possible to prioritize loading JavaScript before images on a webpage?

Encountering a series of frustrating 404 errors when attempting to submit a React form multiple times

Troubleshooting NodeJS CORS issue with heavy requests for file uploads

Redirecting in Next.js from an API route

Encountering the error message "Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client" while attempting to identify duplicate entries in my database

Uncover the solution to eliminating webpack warnings associated with incorporating the winston logger by utilizing the ContextReplacementPlugin

Updating the head() properties in Nuxt.js via asyncData() is not possible

Steps to activate the image viewer for each individual looping image:

Warning from Cytoscape.js: "The use of `label` for setting the width of a node is no longer supported. Please update your style settings for the node width." This message appears when attempting to create

What could be the reason for the handleOpen and handleClose functions not functioning as expected?

'Error: The type is missing the 'previous' property - Combining TypeScript with ReactJS'

Merging the `on('click')` event with `$(this)`

Setting dynamic routes in Next.js when the basePath is not the root can be done by carefully configuring the routing system

I am unable to determine if I have already selected a List Item

Trying to add a single value to a specific index in a JavaScript array, but it is mistakenly assigning multiple values at once

Manipulate the timing of css animations using javascript