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

Question

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?

"I was giving the task to change the HTML content " ok, but, what is the exactly the task? What is the problem here, what issues are you facing? — Calvin Nunes
– Calvin Nunes, Commented Oct 2, 2018 at 12:06
this isn't the appropriate site for such kind of questions, refactoring/optimizing code is better at Code Review — user7148391
– user7148391, Commented Oct 2, 2018 at 12:09
Also, why do you think a loop will help here? What is the objective of using a loop? — Calvin Nunes
– Calvin Nunes, Commented Oct 2, 2018 at 12:10
Sorry @CalvinNunes , this was the first question I've made at Stackoverflow, I'll improve next time. Also I wanted to know how to make it with a loop, just because I've heard it could be done with it, but I couldn't realize how. — danihazler
– danihazler, Commented Oct 2, 2018 at 12:30

gugateider · Accepted Answer · 2018-10-02 12:14:55Z

1

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.

answered Oct 2, 2018 at 12:14

gugateider

2,0872 gold badges15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

danihazler Over a year ago

Thank you so much for your help, gugateider! :)

gugateider Over a year ago

You're welcome, welcome to stack overflow. If this answer helped you please click as the "Accepted Answer".

Andy Over a year ago

You could also remove the inline JS and have the colours as data attributes. Like this demo.

danihazler Over a year ago

oh, that's great! Thanks @Andy

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related