Filter divs by class

Question

I am trying to create a function that returns an additional display of none when you click on a button. It basically filters divs with class names when you click a button. I used a while/do loop to go through all the elements by class name. In the browser console log it is telling me

"Cannot read property 'style' of undefined".

Does anybody knows what might be the problem?

    <div class="container"> 
      <h1 id="title">World's Top suppply chains</h1>
        <div class="options">
          <button id="allbtn">All</button>
          <button>Drinks</button>
          <button>Clothing</button>
          <button>Cars</button>
          <button id="fast-food-btn">Fast Food</button>
    </div>

    <div class="stores">
        <div class="store">
            <img src="images/adidas.png">
            <h3>Adidas</h3>
            <p class="industry">Clothing</p>
        </div>



        <div class="store">
            <img src="images/corona.png">
            <h3>Corona</h3>
            <p class="industry">Drinks</p>
        </div>


        <div class="store">
            <img src="images/nike.jpg">
            <h3>Nike</h3>
            <p class="industry">Clothing</p>
        </div>

        <div class="store">
            <img src="images/lambo.png">
            <h3>Lamborghini</h3>
            <p class="industry">Cars</p>
        </div>

        <div class="store">
            <img src="images/smirnoff.png">
            <h3>Smirnoff</h3>
            <p class="industry">Drinks</p>
        </div>



        <div class="store">
            <img src="images/pepsi.jpg">
            <h3>Pepsi</h3>
            <p class="industry">Drinks</p>
        </div>


        <div class="store">
            <img src="images/gucci.png">
            <h3>Gucci</h3>
            <p class="industry">Clothing</p>
        </div>

          <div class="store">
            <img src="images/heineken.jpg">
            <h3>Heineken</h3>
            <p class="industry">Drinks</p>
        </div>



        <div class="store">
            <img src="images/lacoste.png">
            <h3>Lacoste</h3>
            <p class="industry">Clothing</p>
        </div>


        <div class="store">
            <img src="images/ferrari.png">
            <h3>Ferrari</h3>
            <p class="industry">Cars</p>
        </div>

      <div class="store">
            <img src="images/pizzahut.png">
            <h3>Pizza Hut</h3>
            <p class="industry">Fast Food</p>
        </div>

      <div class="store">
            <img src="images/cocacola.png">
            <h3>Coca Cola</h3>
            <p class="industry">Drinks</p>
        </div>

        <div class="store">
            <img src="images/mc.png">
            <h3>Mc Donalds</h3>
            <p class="industry">Fast Food</p>
        </div>      
    </div>
</div>


<script>
    const industry = document.getElementsByClassName(".industry");
    const fastFood = document.getElementById("fast-food-btn"); 

    allbtn.addEventListener("click", filter);

    function filter(){

        const card = industry.parentElement; 

    do{
         card.style.display = "none";
    }
        while(industry.innerHTML === "Fast Food");
    }

</script>

Answer 1

First issue is that you don't need the dot in front of the class when using getElementsByClassName. Secondly getElementsByClassName returns a HTMLCollection which does not have a property called parent.

Which results in something like this:

function filter() {
    const industries = document.getElementsByClassName("industry");
    for (let industry of industries) {
        industry.style.display = "none";
    }
}

Furthermore, it looks like the variable fastFood is not used and the variable allbtn is undefined. I assume it shoul be something like this:

const allbtn = document.getElementById("allbtn");

Putting it together, this should solve your problem:

<script>
    function filter() {
        const industries = document.getElementsByClassName("industry");
        for (let industry of industries) {
            industry.style.display = "none";
        }
    }
    const allbtn = document.getElementById("allbtn");
    allbtn.addEventListener("click", filter);
</script>