Iterate through multiple parent divs (with same class) to access the child divs inside (same class) using Javascript

Question

I am trying to iterate through the parent class "cardTags" to change the background color of each child div "tag" depending on what the value is (using.textContent)

For HTML I have:

<div class = 'card'>
   <div class='cardTags'>
       <div class='tag' id='tag1'>
           <header> Auction </header>
       </div>

       <div class='tag' id='tag2'>
           <header> 3d 40m 23s left </header>
       </div>

        <div class='tag' id='tag3'>
            <header> $39 </header>
        </div>
    </div>
</div>

<div class = 'card'>
   <div class='cardTags'>
       <div class='tag' id='tag1'>
           <header> Sell </header>
       </div>

       <div class='tag' id='tag2'>
           <header> Used </header>
       </div>

        <div class='tag' id='tag3'>
            <header> $59 </header>
        </div>
    </div>
</div>

For Javascript

function checkTags() {
var category = document.getElementById('tag1');
var condition = document.getElementById('tag2');
var specialty = document.getElementById('tag3');

var textCategory = category.textContent;
var textCondition = condition.textContent;
var textSpecialty = specialty.textContent;
    

if (textCategory = "Auction") {
    category.style.backgroundColor = "#00FF00";
} else if (textCategory = "Trade" {
    category.style.backgroundColor = "#00FF00";
} else {
    category.style.backgroundColor = "#00FF00";
}

if (textCondition.length = 'Used') {
    condition.style.backgroundColor = '#f75555';
} else if (textCondition = 'New') {
    condition.style.backgroundColor = '#2fb62f';
} else {
    condition.style.backgroundColor = '#f9f906';
}
}

I know the javascript above will only look at 1 div "cardTags" not all the other ones, which is why I am trying to know how can I iterate through each "cardTags" div and see the child divs inside and change the background colors of those divs depending on the values within them. Currently javascript only recognizes one set.

Answer 1

1. id attributes should be unique, currently you have the same id on more than one child element of the parent divs. So you should use the shared className for the children.

2. I modified the classNames of each child tag to be tag1 , tag2 , tag3 , respectively on each set of children.

3. You had some typo's or badly formatted code as well, where you were missing a parenthesis on one of your else-if statements.

4. You were assigning values instead of doing equality comparison in your if and else-if , so I fixed that as well.

5. Also, you were attempting to do comparison of string values and the text content of the headers had leading and trailing space, so I added the trim() function on each call to textContent to remove the extra whitespace for equality comparison.

6. You also had one string comparison where you had appended .length at the end of the string variable, which was causing issues as well.

7. Please see the following for a working example:

 window.addEventListener("DOMContentLoaded", () => { checkTags(); }); function checkTags() { //get the parents const parents = document.querySelectorAll('div.cardTags'); parents.forEach((el) => { const category = el.querySelector('div.tag1'); const condition = el.querySelector('div.tag2'); const specialty = el.querySelector('div.tag3'); const textCategory = category.querySelector('header').textContent.trim(); const textCondition = condition.querySelector('header').textContent.trim(); const textSpecialty = specialty.querySelector('header').textContent.trim(); if (textCategory === "Auction") { category.style.backgroundColor = "#00FF00"; } else if (textCategory === "Trade") { category.style.backgroundColor = "#00FF00"; } else { category.style.backgroundColor = "#00FF00"; } if (textCondition === 'Used') { condition.style.backgroundColor = '#f75555'; } else if (textCondition === 'New') { condition.style.backgroundColor = '#2fb62f'; } else { condition.style.backgroundColor = '#f9f906'; } }); }

 <div class = 'card'> <div class='cardTags'> <div class='tag1'> <header> Auction </header> </div> <div class='tag2'> <header> 3d 40m 23s left </header> </div> <div class='tag3'> <header> $39 </header> </div> </div> </div> <div class = 'card'> <div class='cardTags'> <div class='tag1'> <header> Sell </header> </div> <div class='tag2'> <header> Used </header> </div> <div class='tag3'> <header> $59 </header> </div> </div> </div>