JavaScript Event (click), on each click

Question

I'm trying to change the background color on each click.

var button = document.querySelector("button");
var body = document.querySelector("body");
var color = true;

button.addEventListener("click", function(){
    if(color){
        body.style.backgroundColor = "purple";
        color != color;
    }
    else if (!color){
        body.style.backgroundColor = "green";
    }
});

correct color != color; to color = false and \ or, simplify your function to function(){ color ? body.style.backgroundColor = "purple" : body.style.backgroundColor = "green"; }; altogether. — Bekim Bacaj
– Bekim Bacaj, Commented Dec 10, 2016 at 3:14

Christoph · Accepted Answer · 2016-12-10 02:04:06Z

3

A small modification. You need to toggle the variable on every click. You could simplify your code further by getting rid of the if else and replace it with else

var button = document.querySelector("button");
var body = document.querySelector("body");
var color = true;

button.addEventListener("click", function() {
  if (color) {
    body.style.backgroundColor = "purple";
  } else {
    body.style.backgroundColor = "green";
  }
  // or equivalent with a ternary operator:
  body.style.backgroundColor = color ? "purple" : "green";

  // color != color is a comparison, but you want an assignment:
  color = !color;
});

Check Fiddle

edited Dec 10, 2016 at 2:04

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

answered Dec 10, 2016 at 1:48

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

1 Comment

Filip Vancevski Over a year ago

I see, i knew i was using the comparison wrong, i just couldn't put my finger on it :D

Collectives™ on Stack Overflow

JavaScript Event (click), on each click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related