CODEWITHSUNDEEP
javascripthtml
danihazler
danihazler

Reputation: 409

How to use a Loop to change a div id using Javascript

I was giving the task to change the HTML content using simple Vanilla Javascript.

The HTML was given and I only needed to code the JS part.

The task consists in changing the HTML content, based on the button that was clicked. If "RED" was clicked, only the red color explanation should appear, and the same for the other colors.

HTML, CSS and JS codes consists:

function show_meaning(color){
  document.getElementById("empty_div").style.display = "none";
  document.getElementById("body").style.backgroundColor = color;
  document.getElementById(color).style.display = "block";

  if(color=="red"){
      document.getElementById("blue").style.display = "none";
      document.getElementById("green").style.display = "none"
  } else if(color=="blue"){
      document.getElementById("red").style.display = "none";
      document.getElementById("green").style.display = "none";

  } else{
      document.getElementById("blue").style.display = "none";
      document.getElementById("red").style.display = "none"
  } 
}
#red, #blue, #green{
  display:none;
}

#empty_div{
  display:block;
}
<div id="empty_div">
  <h3> Click on the button below to see the meaning of each colour!</h3>
</div>

<div id="red">
  Red is the color of fire and blood, so it is associated with energy, war, 
    danger, strength, power, determination as well as passion, desire, and love. 
</div>
<div id="green">Green is the color of growth and health. </div> 
<div id= "blue">Blue is the color of the sky and sea. </div>
</div>
<button onclick="show_meaning('red')">RED</button>        
<button onclick="show_meaning('green')">GREEN</button>
<button onclick="show_meaning('blue')">BLUE</button>
</div>

My question is, how can I get the same result using a for or while loop?

Upvotes: 1

Views: 983

Answers (1)

gugateider
gugateider

Reputation: 2057

First you can create a function to reset ( hide ) all divs, then apply the function to display the desired div. You will not need a for loop for that, because if you do you'll have to add all the id's to an array in case you wish to add new items. Here is a simple solution for your problem:

const show_meaning = (color) => { 
  hideAll();
  let color_div = document.getElementById(color);
  color_div.style.backgroundColor = color;
  color_div.style.display = 'block';
}

const hideAll = () => {
  
  const items = document.querySelectorAll('.color-item');
  items.forEach( (item) => item.style.display = 'none' );
  
}
//hideAll();
/**#red, #blue, #green {
  display:none;
}
no longer need this
**/
#empty_div{
  display:block;
}
.color-item { 
 display: none;
}
<div id="empty_div">
  <h3> Click on the button below to see the meaning of each colour!</h3>
</div>

<div id="red" class="color-item">
  Red is the color of fire and blood, so it is associated with energy, war, 
    danger, strength, power, determination as well as passion, desire, and love. 
</div>
<div id="green" class="color-item">Green is the color of growth and health. </div> 
<div id= "blue" class="color-item">Blue is the color of the sky and sea. </div>

<button onclick="show_meaning('red')">RED</button>        
<button onclick="show_meaning('green')">GREEN</button>
<button onclick="show_meaning('blue')">BLUE</button>

also, make sure you fix your HTML you have extra closing div tags on it.

Upvotes: 1

Related Questions