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>

`I want to be able to click on each one individually to change the color to either blue or grey` - under what conditions? ie, when to change to blue and when to grey? Also, do you use any libraries, like jQuery or angular etc? — Jamiec, Apr 23 '18 at 14:08
Hi Jamiec - I am basically creating a roster app - the divs represent an hour that the person is in work for - I want to be able to click that div to color it blue if they are in and to be able to click the same div to color it grey if they aren't - at the moment with my code I can only color them blue — Sam Lawless, Apr 23 '18 at 14:14
Youve still not answered the question(s). Is that one click for blue and two for grey? Or 2 different buttons? or..... something else — Jamiec, Apr 23 '18 at 14:15
Basicall 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. - and no I am not using any libraries just JS — Sam Lawless, Apr 23 '18 at 14:19

Taki · Accepted Answer · 2018-04-23T14:33:46.367

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>

Scott Marcus · Answer 2 · 2018-04-23T14:38:40.387

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>

score 0 · Answer 3 · answered Apr 23 '18 at 14:30

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.

If Else Statement using ELM

3 Answers3