If Else Statement using ELM

Question

I am looking to change specific div colors oclick to either blue or grey - There are a number of different divs under the same class and I want to be able to click on each one individually to change the color to either blue or grey

  <div class="sidebar2" onclick="change(this)"> <p>11</p> </div> <div class="sidebar2" onclick="change(this)"> <p>10</p> </div> <div class="sidebar2" onclick="change(this)"> <p>9</p> </div> <div class="sidebar2" onclick="change(this)"> <p>8</p> </div> <!-- JavaScript --> <script> function change(elm) { elm.style.backgroundColor = '#1E90FF' } </script> 

Answer 1

add a class with the background color and use .toogle() to add or remove the class , pass the classe name as a param for the change() :

 function change(elm, className) { elm.classList.toggle(className) } 

 .blue{ background: blue; } .gray{ background: gray; } 

 <div class="sidebar2" onclick="change(this, 'blue')"> <p>11</p> </div> <div class="sidebar2" onclick="change(this, 'gray')"> <p>10</p> </div> <div class="sidebar2" onclick="change(this, 'blue')"> <p>9</p> </div> <div class="sidebar2" onclick="change(this, 'gray')"> <p>8</p> </div> 

EDIT : based on your comment : the div will start as Grey and I want to have it when I click it will turn Blue and then if I click the same div whilst its blue it turns back to Grey

 function change(elm) { elm.classList.toggle('blue') } 

 .sidebar2{ background: #aaa; } .blue{ background: #1E90FF; } 

 <div class="sidebar2" onclick="change(this)"> <p>11</p> </div> <div class="sidebar2" onclick="change(this)"> <p>10</p> </div> <div class="sidebar2" onclick="change(this)"> <p>9</p> </div> <div class="sidebar2" onclick="change(this)"> <p>8</p> </div> 

Answer 2

You're close. Start out with a CSS class that is applied to all the div elements by default to make then initially gray. Then, when clicked, toggle another class that will override the gray and make them blue.

And, rather than setting inline styles (with element.style.backgroundColor ), use the element.classList API, which is simple to use and allows you to set up CSS classes ahead of time that just need to be added, removed or toggled.

But also, you should not use HTML event handling attributes, such as onchange . This is a 20+ year old technique that, unfortunately, is so prolific, it still gets used although there are many reasons to abandon this technique . Instead, do all your JavaScript in a separate script .

Lastly, unless there is some specific reason you are using p elements inside each div element, you can get rid of either the div or the p elements as they both signify a new section to your code.

Take note of how much cleaner the HTML is in the following:

 // Get all the p elements that need to be able to be colored into an array var pars = Array.prototype.slice.call(document.querySelectorAll("p.sidebar2")); // Loop over the array elements and assign a click event handler each p pars.forEach(function(p){ p.addEventListener("click", function() { p.classList.toggle("blue"); // Toggle the use of the .blue class }); }); 

 .sidebar2 { background: #e0e0e0; } /* Applied by default */ p.blue { background: lightblue; } /* Toggled on/off when div is clicked */ 

 <!-- The HTML can be much more simplified --> <p class="sidebar2">11</p> <p class="sidebar2">10</p> <p class="sidebar2">9</p> <p class="sidebar2">8</p> 

Answer 3

Given two css classes, one to represent in and one out you can toggle one on and one off in your change method.

 function change(elm) { elm.classList.toggle("in"); elm.classList.toggle("out"); } 

 .in { background-color:#1E90FF; // blue } .out { background-color:#CCCCCC; // grey } 

 <div class="sidebar2 in" onclick="change(this)"> <p>11</p> </div> <div class="sidebar2 in" onclick="change(this)"> <p>10</p> </div> <div class="sidebar2 in" onclick="change(this)"> <p>9</p> </div> <div class="sidebar2 in" onclick="change(this)"> <p>8</p> </div> 

Note: I have defaulted them all to in to start, you could default them the other way if need be.