How do I correctly modify multiple elements using Javascript?

Question

Hi I'm starting to learn javascript and I have a button that when I click, it changes the header, nav bar, footer, and some text from one colour to another and when I click it again, it reverts back to it. There is a proper html/css files that go with it but I'm not sure if this is the correct approach.

Is there some way to maybe work with the id so that I can change the CSS instead?

This is my current approach with my script.:

<script>

function changeColor() {
    var color = 0;
    if (color == 0) {

        document.getElementById("topBar").style.background = "#36648B"
        document.getElementById("topBar").style.color = "#C1F0F6"
        document.getElementById("myBlog").style.background = "#62B1F6"
        document.getElementById("navBar").style.background = "#9BC4E2"
        document.getElementById("footer").style.background = "#50A6C2"

        var y = document.getElementsByClassName("sideCol")

        y[0].style.background = "#C3E4ED"

    } 
}
</script>

Usually I prefer to keep all of my styles in my CSS files. In your case I would define 2 CSS classes .color1 & .color2. Then using JS change add/remove the appropriate class. — wickdninja
– wickdninja, Commented Oct 11, 2018 at 3:02

Ram · Accepted Answer · 2018-10-11 04:00:38Z

4

I usually prefer adding/removing CSS classes instead of working with HTMLElement.style property. .classList property of HTMLElement objects provide several methods for managing an element's className property.

Example CSS:

#topBar.active-topbar {
  background: #36648B;
  color: #C1F0F6;
}

JavaScript:

var el = document.getElementById("topBar")
// adding a class:
el.classList.add('active-topbar')
// removing a class:
el.classList.remove('active-topbar')
// toggling a class:
el.classList.toggle('active-topbar')
// does the element have a specific class?
el.classList.contains('active-topbar')

Here is an interactive example:

document.querySelector('#toggle-class').addEventListener('click', changeColor);

function changeColor() {
   document.getElementById('topBar').classList.toggle('active-topbar');
}

 #topBar {
   border: 1px solid #ccc;
   padding: 5px;
 }
 
 #topBar.active-topbar {
     background: #36648B;
     color: #C1F0F6;
  }

<div id="topBar">
   Top Bar
</div>
<br>
<button id="toggle-class">Toggle Color</button>

edited Oct 11, 2018 at 4:00

answered Oct 11, 2018 at 3:10

Ram

145k16 gold badges174 silver badges201 bronze badges

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

7 Comments

Sam Over a year ago

what does .toggle do? I can't seem to find a good explanation

Ram Over a year ago

I'm copying linked MDN article's description of the method: "When only one argument is present: Toggle class value; i.e., if class exists then remove it and return false, if not, then add it and return true. When a second argument is present: If the second argument evaluates to true, add specified class value, and if it evaluates to false, remove it."

ippi Over a year ago

.toggle() adds a class if it doesn't exist and removes it if it does. The fact that you can use a boolean as the second variable to force the value makes it versatile el.classList.toggle('active-topbar', isTopbarVisible); (but breaks in ie10). But your assumptions are probably correct (you can do the exact same things with just .add()/.remove() and some if-condition) so it's a bit superfluous but allows for cleaner code.

Sam Over a year ago

Is this case, how would I "toggle" to use the active-topbar and revert back to the original topbar? Would I just call .toggle?

Ram Over a year ago

@Sam I have added an example for that. Using toggle for adding/removing all the required classes makes your code very concise as you don't have to check the existence of a class: function changeColor() { document.getElementById("topBar").toggle('active-topbar') }

|

CertainPerformance · Accepted Answer · 2018-10-11 03:08:43Z

If you like working with CSS text instead, one option would be to insert your own <style> element into the HTML:

function changeColor() {
  var color = 0;
  if (color == 0) {
    document.head.appendChild(document.createElement('style')).textContent = `
    #topBar {
      background: #36648B;
      color: #C1F0F6;
    }
    #myBlog {
      background: #62B1F6;
    }
    #navBar {
      background: #9BC4E2;
    }
    #footer {
      background: #50A6C2;
    }
    .sideCol {
      background: #C3E4ED;
    }
    `;
  }
}

setTimeout(changeColor, 1500);

<div id="topBar">top bar content</div>

If you want to revert the effect, you can remove the <style> element later.

Dhana · Accepted Answer · 2020-05-04 14:27:01Z

I used simple Javascript toggle way to change the color

HTML Code:

    function btnColor(btn) {
    var property = document.getElementById(btn);
        if (property.className !== 'toggled') {
            property.className = 'toggled'
              document.getElementById("topBar").style.background = "#36648B"
            document.getElementById("topBar").style.color = "#C1F0F6"
            document.getElementById("myBlog").style.background = "#62B1F6"
            document.getElementById("navBar").style.background = "#9BC4E2"
            document.getElementById("footer").style.background = "#50A6C2"
        }
        else {
            property.className = '';        
            document.getElementById("topBar").style.background = ""
            document.getElementById("topBar").style.color = ""
            document.getElementById("myBlog").style.background = ""
            document.getElementById("navBar").style.background = ""
            document.getElementById("footer").style.background = ""
        }
    }

 <input type="button" id="btnHousing" value="Housing" onclick="btnColor('btnHousing');" />
    <p id='topBar'>
    topBar
    </p>
    <p id='myBlog'>
    myBlog
    </p>
    <p id='navBar'>
    navBar
    </p>
    <p id='footer'>
    footer
    </p>

JSFiddle

Collectives™ on Stack Overflow

How do I correctly modify multiple elements using Javascript?

3 Answers 3

7 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Related