CODEWITHSUNDEEP
javascripthtmlcss
Sam
Sam

Reputation: 505

How do I correctly modify multiple elements using Javascript?

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>

Upvotes: 0

Views: 88

Answers (3)

Dhana
Dhana

Reputation: 1658

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

Upvotes: 0

Ram
Ram

Reputation: 144689

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>

Upvotes: 4

CertainPerformance
CertainPerformance

Reputation: 370699

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.

Upvotes: 0

Related Questions