Resolved: Add 1 more filter for divs in a JavaScript

Question:

I want to filter my divs by type of it (hotel/hostel), and the city where it is located. I have added filtering by type of property, but don’t know how to add one more filter, and how to make it work good simultaneously. First filter looks like checkboxes, second is radiobuttons. Divs:

function change() {
  var checkboxes = document.getElementsByClassName('checkbox');
  var chekboxInputs = Array.from(checkboxes).map(a => a.querySelector('input'));
  var allAreUnselected = chekboxInputs.every(function(elem) {
    return !elem.checked;
  });
  if (allAreUnselected) {
    chekboxInputs.forEach(function(input) {
      Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item) {
        item.style.display = 'block';
      });
    });
  } else {
    chekboxInputs.forEach(function(input) {
      Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item) {
        item.style.display = input.checked ? 'block' : 'none';
      });
    });
  }
}
change();

<div class="lviv hotel">
  <div class="hotel-info">
    <p>BonApart Deluxe Hotel</p>
  </div>
</div>
<h2>Select Filters</h2>
<h3>Property Type</h3>
<div class="checkbox">
  <input type="checkbox" rel="hotel" onchange="change()" />
  <p>Hotel</p>
</div>
<div class="checkbox">
  <input type="checkbox" rel="hostel" onchange="change()" />
  <p>Hostel</p>
</div>

<h3>City</h3>
<div class="radio"><input type="radio" name="cities"> Kyiv</div>
<div class="radio"><input type="radio" name="cities"> Lviv</div>
<div class="radio"><input type="radio" name="cities"> Tokyo</div>

Answer:

You need to keep track of both the selections separately and finally decide what to show. type is a kind of OR operation as it is allowed to be one of many options. city is must have a property in your div classes.
The following code will work as you expect with both checkboxes and radio buttons. It can be extended as you want.

let types = [];
let city = undefined;

function change() {
  var checkboxes = document.getElementsByClassName("checkbox");
  types = Array.from(checkboxes)
    .filter((a) => a.querySelector("input").checked)
    .map((a) => a.querySelector("input").getAttribute("rel"));

  var radioButtons = document.getElementsByClassName("radio");
  city = Array.from(radioButtons)
    .find((a) => a.querySelector("input").checked)
    ?.querySelector("input")
    ?.getAttribute("value");

  if (types == [] && city == undefined) {
    // no filters selected
    Array.from(document.querySelectorAll(".item")).forEach(function (
      item
    ) {
      item.style.display = "block";
    });
  } else {
    Array.from(document.querySelectorAll(".item")).forEach(function (
      item
    ) {
      let itemTags = item
        .getAttribute("class")
        .split(" ")
        .filter((item) => item !== "item");

      let visible = true;

      if (city) {
        visible = itemTags.indexOf(city) >= 0;
      }

      if (types.length > 0) {
        visible =
          visible && types.some((item) => itemTags.indexOf(item) >= 0);
      }

      item.style.display = visible ? "block" : "none";
    });
  }
}

<html>
  <head>
    <title>Page Title</title><link rel="preload" as="font" href="https://devsfix.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v2.2" type="font/woff2" crossorigin="anonymous" />
  </head>

  <body>
    <div class="lviv hotel item">
      <div class="hotel-info">
        <p>BonApart Deluxe Hotel</p>
      </div>
    </div>
    <div class="tokyo hostel item">
      <div class="hostel-info">
        <p>Hostel in Tokyo</p>
      </div>
    </div>

    <h2>Select Filters</h2>

    <h3>Property Type</h3>
    <div class="checkbox">
      <input type="checkbox" rel="hotel" onchange="change()" />
      <label>Hotel</label>
    </div>
    <div class="checkbox">
      <input type="checkbox" rel="hostel" onchange="change()" />
      <label>Hostel</label>
    </div>

    <h3>City</h3>
    <div class="radio">
      <input
        type="radio"
        value="kyiv"
        id="Kyiv"
        name="city"
        onchange="change()"
      /><label for="Kyiv">Kyiv</label><br />
    </div>
    <div class="radio">
      <input
        type="radio"
        value="lviv"
        id="Lviv"
        name="city"
        onchange="change()"
      /><label for="Lviv">Lviv</label><br />
    </div>
    <div class="radio">
      <input
        type="radio"
        value="tokyo"
        id="Tokyo"
        name="city"
        onchange="change()"
      /><label for="Tokyo">Tokyo</label><br />
    </div>

    <script>
      let types = [];
      let city = undefined;

      function change() {
        var checkboxes = document.getElementsByClassName("checkbox");
        types = Array.from(checkboxes)
          .filter((a) => a.querySelector("input").checked)
          .map((a) => a.querySelector("input").getAttribute("rel"));

        var radioButtons = document.getElementsByClassName("radio");
        city = Array.from(radioButtons)
          .find((a) => a.querySelector("input").checked)
          ?.querySelector("input")
          ?.getAttribute("value");

        if (types == [] && city == undefined) {
          // no filters selected
          Array.from(document.querySelectorAll(".item")).forEach(function (
            item
          ) {
            item.style.display = "block";
          });
        } else {
          Array.from(document.querySelectorAll(".item")).forEach(function (
            item
          ) {
            let itemTags = item
              .getAttribute("class")
              .split(" ")
              .filter((item) => item !== "item");

            let visible = true;

            if (city) {
              visible = itemTags.indexOf(city) >= 0;
            }

            if (types.length > 0) {
              visible =
                visible && types.some((item) => itemTags.indexOf(item) >= 0);
            }

            item.style.display = visible ? "block" : "none";
          });
        }
      }
    </script>
  
</body>
</html>

Note that I have added a common CSS class (“item”) to all the items you gonna either show or hide, to make it easier to select them easily.

If you have better answer, please add a comment about this, thank you!

Resolved: Add 1 more filter for divs in a JavaScript

Resolved: Use Svelte Component as Slot

Resolved: Vaadin 14.9 – Redirect on Session Destroy Event

Resolved: How to separate multiple answers in one column, for multiple columns, by creating extra columns

Leave A Reply