CODEWITHSUNDEEP
javascripthtmlcss
heyjaak
heyjaak

Reputation: 3

How to make a Button change Background and Text color on click

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 but the text doesn't change color. I want the "changeText" to affect Classes instead of Ids.

I have zero knowledge of JavaScript, so it's hard to know what's wrong.

This is the code:

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

function changeText() {
  var col = document.getElementsByClassname("textcolor");
  if (colorIndex >= colors.length) {
    colorIndex = 0;
  }
  col.body.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++;
}
<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>

</body>

Upvotes: 0

Views: 1202

Answers (4)

AbdulAzeez Olanrewaju
AbdulAzeez Olanrewaju

Reputation: 1078

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>

Upvotes: 0

Verthosa
Verthosa

Reputation: 1688

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.

Upvotes: 4

Matt Croak
Matt Croak

Reputation: 2888

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>

Upvotes: 0

Vikas Saini
Vikas Saini

Reputation: 485

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

Upvotes: 0

Related Questions