0

I am building a program that filters the tags based on a user search, i built it with nodes hiding parent nodes based on the user input but was told i need to use classList.add("hidden"). When i try to use it im getting errors that it cant read the classlist.add. is there something obvious that i am missing here?

//variables
let searchInput = document.getElementById("filter");
let searchValue = searchInput.value;
let tags = Array.from(document.querySelectorAll(".tags"));
let imgTag = document.querySelector(".tags");
let thumbnails = document.querySelectorAll("div. thumb-display");

searchInput.addEventListener("input", () => {
 for (let i = 0; i < tags.length; i++) {
    tags[i].addEventListener("input", () => {
      if (imgTag.textContent.includes(searchValue)) {
        thumbnails.class.remove("hidden");
      } else {
        thumbnails.classList.add("hidden");
      }
    });
  }
    let resetButton = document.querySelector(".reset");

  searchInput.addEventListener("input", () => {
    resetButton.classList.remove("hidden");
    console.log("text is entered");
  });

  resetButton.addEventListener("click", () => {
    resetButton.classList.add("hidden");
    thumbnails.classList.remove("hidden");
    searchInput = "";
  });
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Assignment 2 - Filtering Gallery</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
    <div class="wrapper">
        <nav>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
            </ul>
            <form class="frm-filter">
                <div class="frm-group">
                    <a class="reset hidden" href="#">Reset</a>
                    <input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />
                </div>
            </form>
        </nav>
        <section class="gallery">
            <div class="row">
                <h1>Gallery</h1>
            </div>
            <div class="row">
                <div class="thumb-display">
                    <img src="img/thumbs/african_road_to_the_mountain.jpg" alt="african road to the mountain" />
                    <p class="tags">#africa #mountain #road</p>
                </div>
                <div class="thumb-display">
                    <img src="img/thumbs/beach_and_palms.jpg" alt="beach and palms" />
                    <p class="tags">#palmbeach #distantpeaks</p>
                </div>
                <div class="thumb-display">
                    <img src="img/thumbs/beach_road.jpg" alt="beach road" />
                    <p class="tags">#oceanbeach #mountainroad</p>
                </div>
                <div class="thumb-display">
                    <img src="img/thumbs/calm_lake.jpg" alt="calm lake" />
                    <p class="tags">#lake #clearskies #onthewater</p>
                </div>
                <div class="thumb-display">
                    <img src="img/thumbs/fall_bridge.jpg" alt="fall bridge" />
                    <p class="tags">#fallcolors #bridgecrossing #river</p>
                </div>
                <div class="thumb-display">
                    <img src="img/thumbs/fall_colors.jpg" alt="fall colors" />
                    <p class="tags">#fallcolors #slowdown</p>
                </div>
                <div class="thumb-display">
                    <img src="img/thumbs/fall_road.jpg" alt="fall road" />
                    <p class="tags">#falltrees</p>
                </div>
                <div class="thumb-display">
                    <img src="img/thumbs/forest_road.jpg" alt="forest road" />
                    <p class="tags">#ontheroad #falldriving</p>
                </div>
                <div class="thumb-display">
                    <img src="img/thumbs/mountain_flowers.jpg" alt="mountain flowers" />
                    <p class="tags">#mountainflowers #clouds #river</p>
                </div>
                <div class="thumb-display">
                    <img src="img/thumbs/mountain_lake.jpg" alt="mountain lake" />
                    <p class="tags">#mountainlake #retreat</p>
                </div>
                <div class="thumb-display">
                    <img src="img/thumbs/mountain_storm_coming.jpg" alt="mountain storm coming" />
                    <p class="tags">#stormcoming #thepeak</p>
                </div>
                <div class="thumb-display">
                    <img src="img/thumbs/rocky_beach.jpg" alt="rocky beach" />
                    <p class="tags">#perfectbeach #whitesand</p>
                </div>
            </div>
        </section>
    </div>
    <script src="js/main.js"></script>
</body>

</html>
Kate Castor
  • 1

1 Answers1

0

Looks like you don't understand your code. It is not a problem of you accessing CSS class. Here is what I see at least:

  1. Search value is extracted from input only once on start.
  2. Invalid usage of "querySelectorAll".
  3. searchInput.addEventListener inside searchInput.addEventListener.
  4. Class list accessed on nodes list, not on single nodes.
  5. Class property accessed instead of classList.

In order to improve you must better understand 1) events happening in the system 2) scope of variables 3) debugging in the browser tools.

Here is what I did based on your description:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Assignment 2 - Filtering Gallery</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <nav>
      <form class="frm-filter">
        <div class="frm-group">
          <a class="reset hidden" href="#">Reset</a>
          <input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />
        </div>
      </form>
    </nav>
    <section class="gallery">
      <div class="row">
        <h1>Gallery</h1>
      </div>
      <div class="row">
        <div class="thumb-display">
          <p class="tags">#africa #mountain #road</p>
        </div>
        <div class="thumb-display">
          <p class="tags">#palmbeach #distantpeaks</p>
        </div>
        <div class="thumb-display">
          <p class="tags">#oceanbeach #mountainroad</p>
        </div>
        <div class="thumb-display">
          <p class="tags">#lake #clearskies #onthewater</p>
        </div>
        <div class="thumb-display">
          <p class="tags">#fallcolors #bridgecrossing #river</p>
        </div>
        <div class="thumb-display">
          <p class="tags">#fallcolors #slowdown</p>
        </div>
        <div class="thumb-display">
          <p class="tags">#falltrees</p>
        </div>
        <div class="thumb-display">
          <p class="tags">#ontheroad #falldriving</p>
        </div>
        <div class="thumb-display">
          <p class="tags">#mountainflowers #clouds #river</p>
        </div>
        <div class="thumb-display">
          <p class="tags">#mountainlake #retreat</p>
        </div>
        <div class="thumb-display">
          <p class="tags">#stormcoming #thepeak</p>
        </div>
        <div class="thumb-display">
          <p class="tags">#perfectbeach #whitesand</p>
        </div>
      </div>
    </section>
  </div>
  <script>
     const thumbnails = document.querySelectorAll(".thumb-display");

    // What I do on EVERY input change?
    const inputChangedHandler = (value) => {
      // I update the status of reset button
      if (value.length === 0) {
        resetButton.classList.add("hidden");
      } else {
        resetButton.classList.remove("hidden");
      }
      // I filter thumbnails elements
      thumbnails.forEach((thumb) => {
        const tags = thumb.querySelector(".tags").textContent;
        if (tags.match(value)) {
          thumb.classList.remove('hidden');
        } else {
          thumb.classList.add('hidden');
        }
      });
    }

    const resetButton = document.querySelector(".reset");
    // What I do on reset button click?
    resetButton.addEventListener("click", () => {
      // I reset value by hand
      searchInput.value = "";
      // I trigger input change handler
      inputChangedHandler(searchInput.value);
    });

    const searchInput = document.getElementById("filter");
    // What I do on input change?
    searchInput.addEventListener("input", () => {
      // I simply trigger input change handler
      inputChangedHandler(searchInput.value);
    });
  </script>
</body>

</html>
Alexey Kornilov
  • 3
  • 1
  • 1