Html Question posted in
Some basic documentation can be found here.

Html – Button to find elements in an Array

I am trying to make a site where the user can hit a button and it will return data from the array. For example, a button called ‘show male dogs’ should bring back the 3 male dogs in the array.

I am not seeing any errors, but nothing happens when I click the button.

<!DOCTYPE html>
<html lang="en">
 <body>  
  <main> 
   <br> <!-- ******************* Button *********************** -->
   <button onclick="showMales()"> # Show Male Dogs </button>
   <p id="btn"></p>

    <br> <!-- ******************* JS Code *********************** -->
    <script>
     const dogArray = [
      {Name: "Boris", Gender: "Male", Age: "Senior", Breed: "Labrador", Link:    "Boris.html"},
      {Name: "Lucy", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Lucy.html"},
      {Name: "Daisy", Gender: "Female", Age: "Senior", Breed: "Golden Retriever", Link: "Daisy.html"}, 
      {Name: "Honey", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Honey.html"}, 
      {Name: "Harley", Gender: "Male", Age: "Senior", Breed: "Labrador", Link: "Haryley.html"}, 
      {Name: "Dolly", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Dolly.html"},
      {Name: "Max", Gender: "Male", Age: "Senior", Breed: "Golden Retriever", Link: "Max.html"}, 
      {Name: "Birdie", Gender: "Female", Age: "Senior", Breed: "Pregnant Hog", Link: "Birdie.html"}, 
      ];

      function showMales(dog) {
      return dog.Gender === "Male";
      }

      console.log(dogArray.find(showMales));
    </script>
 </main>           
</body>
Tags:

2

Answers


  1. 0

    You need to use the filter function instead of the find. The find function should return the first match while filter get all the records matched with the condition

    <!DOCTYPE html>
<html lang="en">
 <body>  
  <main> 
   <br> <!-- ******************* Button *********************** -->
   <button onclick="showMales()"> # Show Male Dogs </button>
   <p id="btn"></p>

    <br> <!-- ******************* JS Code *********************** -->
    <script>
     const dogArray = [
      {Name: "Boris", Gender: "Male", Age: "Senior", Breed: "Labrador", Link:    "Boris.html"},
      {Name: "Lucy", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Lucy.html"},
      {Name: "Daisy", Gender: "Female", Age: "Senior", Breed: "Golden Retriever", Link: "Daisy.html"}, 
      {Name: "Honey", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Honey.html"}, 
      {Name: "Harley", Gender: "Male", Age: "Senior", Breed: "Labrador", Link: "Haryley.html"}, 
      {Name: "Dolly", Gender: "Female", Age: "Puppy", Breed: "Golden Retriever", Link: "Dolly.html"},
      {Name: "Max", Gender: "Male", Age: "Senior", Breed: "Golden Retriever", Link: "Max.html"}, 
      {Name: "Birdie", Gender: "Female", Age: "Senior", Breed: "Pregnant Hog", Link: "Birdie.html"}, 
      ];

      function showMales() {
        var dogs = dogArray.filter((dog) => dog.Gender === "Male");
        // do some logic to publish the list
        return dogs
      }
    </script>
 </main>           
</body>
    Login or Signup to reply.
  2. 0

    You could try filter the result first before printing it, something like this:

     const maleDogs = dogArray.filter(dog => dog.Gender === "Male");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search