Javascript enable html when input checkbox checked

Question

What should be the condition for: If i click the check box then the items for that particular brand is triggered?

Here I want to print the values for the item selected

The current code is showing Cannot read properties of null (reading 'addEventListener')

let filterBrand = document.getElementById("filter-brands");
filterBrand.addEventListener("change", function() {
  if (filterBrand.value == "Amana") {
    document.querySelector(".item-list").innerHTML = "";
    for (let i = 0; i < productData.length; i++) {
      console.log("hello");
    }
  }
});

<h5>Filter By Brand</h5>
<ul id="filter-brands">
  <li>
    <input type="checkbox" id="Amana" value="Amana" />
    <label for="Amana">Amana</label>
  </li>
  <li>
    <input type="checkbox" id="Frigidaire" value="Frigidaire" />
    <label for="Frigidaire">Frigidaire</label>
  </li>
  <li>
    <input type="checkbox" id="GE" value="GE" />
    <label for="GE">GE</label>
  </li>
  <li>
    <input type="checkbox" id="Insignia" value="Insignia" />
    <label for="Insignia">Insignia</label>
  </li>
  <li>
    <input type="checkbox" id="LG" value="LG" />
    <label for="LG">LG</label>
  </li>
  <li>
    <input type="checkbox" id="Samsung" value="Samsung" />
    <label for="Samsung">Samsung</label>
  </li>
  <li>
    <input type="checkbox" id="Whirlpool" value="Whirlpool" />
    <label for="Whirlpool">Whirlpool</label>
  </li>
</ul>

It looks like your selecting the wrong element. You should select the checkbox instead. document.querySelector('#Amana'). — Duha
– Duha, Commented Jun 17, 2022 at 7:29
Where are you executing the JS? In the head tag or at the end of body tag. I just copied your code to codepen and everything worked. Additionally, you are using change event on the UL tag. Change event is only triggered from inputs. — Gasim
– Gasim, Commented Jun 17, 2022 at 7:31
JS file is used in the head tag, and this function is used before products list function — Brainfuck
– Brainfuck, Commented Jun 17, 2022 at 7:35

KooiInc · Accepted Answer · 2022-06-17 09:56:24Z

You can retrieve all checked checkboxes within ul#filter-brands using the css-selector #filter-brands input[type='checkbox']:checked. For example:

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.closest(`#filter-brands`)) {
    console.clear();
    const selected = [];
    // all checked checkboxes
    document.querySelectorAll(`#filter-brands input[type='checkbox']:checked`)
      .forEach( cb => /* here you can insert code to display stuff */
        selected.push(cb.id) );
    console.log(`Selected: ${selected.length ? selected.join(`, `) : `NONE`}`);
  }
}

<h5>Filter By Brand</h5>
<ul id="filter-brands">
  <li>
    <input type="checkbox" id="Amana" value="Amana" />
    <label for="Amana">Amana</label>
  </li>
  <li>
    <input type="checkbox" id="Frigidaire" value="Frigidaire" />
    <label for="Frigidaire">Frigidaire</label>
  </li>
  <li>
    <input type="checkbox" id="GE" value="GE" />
    <label for="GE">GE</label>
  </li>
  <li>
    <input type="checkbox" id="Insignia" value="Insignia" />
    <label for="Insignia">Insignia</label>
  </li>
  <li>
    <input type="checkbox" id="LG" value="LG" />
    <label for="LG">LG</label>
  </li>
  <li>
    <input type="checkbox" id="Samsung" value="Samsung" />
    <label for="Samsung">Samsung</label>
  </li>
  <li>
    <input type="checkbox" id="Whirlpool" value="Whirlpool" />
    <label for="Whirlpool">Whirlpool</label>
  </li>
</ul>

A more specific approach (handler per checkbox):

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.closest(`#filter-brands`) && evt.target.type === `checkbox`) {
    const selected = evt.target.checked;
    return document.querySelector(`[data-selector='${evt.target.id}']`)
      .classList[evt.target.checked ? `add` : `remove`](`selected`);
  }
}

ul {
  display: inline-block;
  max-width: 50vw;
}

ul#filter-brands {
  float: left;
}

#brand-lists li {
  display: none;
}

#brand-lists li.selected {
  display: revert;
}

<h5>Filter By Brand</h5>
<ul id="filter-brands">
  <li>
    <input type="checkbox" id="Amana" value="Amana" />
    <label for="Amana">Amana</label>
  </li>
  <li>
    <input type="checkbox" id="Frigidaire" value="Frigidaire" />
    <label for="Frigidaire">Frigidaire</label>
  </li>
  <li>
    <input type="checkbox" id="GE" value="GE" />
    <label for="GE">GE</label>
  </li>
  <li>
    <input type="checkbox" id="Insignia" value="Insignia" />
    <label for="Insignia">Insignia</label>
  </li>
  <li>
    <input type="checkbox" id="LG" value="LG" />
    <label for="LG">LG</label>
  </li>
  <li>
    <input type="checkbox" id="Samsung" value="Samsung" />
    <label for="Samsung">Samsung</label>
  </li>
  <li>
    <input type="checkbox" id="Whirlpool" value="Whirlpool" />
    <label for="Whirlpool">Whirlpool</label>
  </li>
</ul>

<ul id="brand-lists">
  <li data-selector="Amana">Amana list</li>
  <li data-selector="Frigidaire">Frigidaire list</li>
  <li data-selector="GE">GE list</li>
  <li data-selector="Insignia">Insignia list
  <li data-selector="LG">LG list</li>
  <li data-selector="Samsung">Samsung list</li>
  <li data-selector="Whirlpool">Whirlpool list</li>
</ul>

Collectives™ on Stack Overflow

Javascript enable html when input checkbox checked

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related