Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

How To Make A Button Change Background And Text Color On Click

Post a Comment
I'm trying to create a button that changes the background colour of the entire page and some of the text colour but I can't make it work. The background is working at the moment bu

Solution 1:

You background change works because getElementById returns just one element on which you can set the style properties.

getElementsByClassName() however return a collection of items. You will have to iterate over it and change the style element per element. Try this:

function changeText() {
  var col = document.getElementsByClassName("textcolor");
  if (colorIndex >= colors.length) {
    colorIndex = 0;
  }
for(var i = 0; i < col.length; i++){
  col[i].style.color = colors[colorIndex];
}
  colorIndex++;
}

Also, you don't need the .body to set the style.


Solution 2:

getElementsByClassName return array of all the elements containing mentioned classname

try

col[0].style.color = colors[colorIndex];

Here is an working sample for you

Visit https://codepen.io/vikas_saini/pen/jOOErNZ


Solution 3:

document.getElementsByClassName("textcolor") is an array of elements. You need to loop through them and apply the color at colors[colorIndex] to them. This is achieved by the added for loop and by applying colors[colorIndex] to col[i].style.color where i is the index of the loop. col[i] is the element in the array at that index.

You also needed to move the conditional for colorIndex above the loop so as to adjust the index before you start applying the style. If colorIndex is 3, you need to change that back to 0 before you start applying the styles. 

<body id='bodycolor'>
<h1 class="textcolor">Title Color Change</h1><br>
<p class="textcolor">Text Color Change </p><br>



<button type="button" onclick="changeBackground();changeText();">Click me</button>



<script>

var colors = ["green", "red", "blue"];
    var colorIndex = 0;
    function changeText() {
        var col = document.getElementsByClassName ("textcolor");
      if( colorIndex >= colors.length ) {
            colorIndex = 0;
        }
        for (var i = 0; i < col.length; i++){
          col[i].style.color = colors[colorIndex]
        } 
        colorIndex++;
    }

var colors = ["red", "blue", "green"];
    var colorIndex = 0;
    function changeBackground() {
        var col = document.getElementById("bodycolor");
        if( colorIndex >= colors.length ) {
            colorIndex = 0;
        }
        col.style.backgroundColor = colors[colorIndex];
        colorIndex++;
    }
</script>

Solution 4:

Why don't you give it Unique IDs and check it out

  let colors = ["green", "red", "blue"];
    let colorIndex = 0;

    function changeBackground() {
      let col = document.getElementById("bodycolor");
      if (colorIndex >= colors.length) {
        colorIndex = 0;
      }
      col.style.backgroundColor = colors[colorIndex];
      colorIndex++;

       let h1Color = document.getElementById("h1Color")
       let pColor = document.getElementById("pColor");

      if (colorIndex >= colors.length) {
        colorIndex = 0;
      }
      h1Color.style.color = colors[colorIndex];
      pColor.style.color = colors[colorIndex];
     colorIndex++;
    }

 <body id='bodycolor'>
      <h1 id="h1Color">Title Color Change</h1><br>
      <p id="pColor">Text Color Change </p><br>
      <button type="button" onclick="changeBackground()">Click me</button>
    </body>

Post a Comment for "How To Make A Button Change Background And Text Color On Click"