CODEWITHSUNDEEP
javascriptloops
Paul C
Paul C

Reputation: 31

How to for loop to find the value you looking for and then add CSS class?

I'm trying to:
  1. for loop' trough 'colorCard' and find the 'div class="card' element with the value: 'color: red' . 2. Then add class of 'red' on this 'div class="card"' element

Basicaly my for loop function is not working and has no error messages in console.

//MY HTML

<body>
    <div class="container" id="all-cards">
    </div>
</body>

//MY JAVASCRIPT

let **colorCard** = [
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: red'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'}
    ];

const allCards = document.querySelector('#all-cards');

let card = colorCard.map(function(cardData){
    return '**<div class="card">**'  +
    '<span>' + cardData.color  + '<span>' +
            '</div>';
});

allCards.innerHTML = card.join('\n');

//UP TO HERE MY CODE IS WORKING

//function below is not working.

// Loop trough the 'let colorCard' finds the value of "color: red" then add CSS class of "red"

for( i = 0; i < card.length; i++){
    if(card[i] === "color: red"){
        console.log("Found it") 
        //Also I want to add a class on this card object
     }
}

Upvotes: 0

Views: 225

Answers (2)

mplungjan
mplungjan

Reputation: 177860

Here is how to find it by text

const colorCard = [
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: red'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'}
];

const allCards = document.querySelector('#all-cards');
allCards.innerHTML = colorCard
  .map(cardData => `<div class="card"><span>${cardData.color}<span></div>`)
  .join("");

[...document.querySelectorAll(".card span")]
  .filter(ele => ele.textContent === "color: red") // whatever text the span contains
  .forEach(ele => ele.classList.add("yellow"));
.red {color:red;} 
.yellow { background-color:yellow;}
<div id="all-cards"></div>

Here is how to add the variable to the class of the div to find it back

const colorCard = [
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: red'},
    {  color: 'color: none'},
    {  color: 'color: none'},
    {  color: 'color: none'}
];

const allCards = document.querySelector('#all-cards');
allCards.innerHTML = colorCard
  .map(cardData => `<div class="card ${cardData.color}"><span>${cardData.color}<span></div>`)
  .join("");

document.querySelector(".red span").classList.add('yellow');
.red {color:red;} 
.yellow { background-color:yellow;}
<div id="all-cards"></div>

Upvotes: 1

Som Shekhar Mukherjee
Som Shekhar Mukherjee

Reputation: 8168

  • Loop through allCards.children (which returns all the card nodes) and then check if the innerText matches "color: red".
  • Then add class to matched element using classList.add.

let colorCard=[{color:"color: none"},{color:"color: none"},{color:"color: none"},{color:"color: none"},{color:"color: red"},{color:"color: none"},{color:"color: none"},{color:"color: none"}];

const allCards = document.querySelector('#all-cards');

let card = colorCard.map(function(cardData) {
  return '<div class="card">' +
    '<span>' + cardData.color + '<span>' +
    '</div>';
});

allCards.innerHTML = card.join('\n');

const cards = allCards.children;
for (i = 0; i < cards.length; i++) {
  if (cards[i].innerText.trim() === "color: red") {
    console.log("Found it")
    cards[i].classList.add("blue");
  }
}
.blue {
  background: cyan;
}
<body>
  <div class="container" id="all-cards">
  </div>
</body>

Upvotes: 1

Related Questions