Facing problem with getting JS button to work

user_17711448 0
Viewed 70

I made a button and added event listener for click to it. right now I set the following code for JS (button id is next):

next.addEventListener("click", () => {
  if (AB.style.backgroundColor === "pink") {
    AB.style.backgroundColor = "red";
  } else if (AB.style.backgroundColor === "red") {
    AB.style.backgroundColor = "orange";
  }
});
#AB {
  background-color: pink;
}
<div id="AB">Words</div>
<button id="next">Button</button>

Now when I click the button the first time, the color does change from pink to red. However, the second click (namely the else if part) does not do anything. How can I make the color toggle on click?

javascript
4 Answers

Yep, as suggested @ggorlen Look into getComputedStyle().

But it will give you a computed value, which is in rgb(,,,) format.

I'd recommend using classes instead.

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    .pink {
      background-color: pink;
    }
    .red {
      background-color: red;
    }
    .orange {
      background-color: orange;
    }
  </style>
</head>

<body>
  <div id="AB" class="pink">Words</div>
  <button id="next">Button</button>
</body>
<script>
  next.addEventListener("click", () => {
    const element = document.getElementById('AB');

    if (element.classList.contains('pink')) {
      element.classList.remove('pink');
      element.classList.add('red');
    } else if (element.classList.contains('red')) {
      element.classList.remove('red');
      element.classList.add('orange');
    }
  });
</script>

</html>
user_88373120

The problem here is that it seems that your div does not have any style.backgroundColor value by default.

To face this problem you can set the backgroundColor value dynamically when the javascript is loaded.

AB.style.backgroundColor = "pink"
next.addEventListener("click", function () {
  if (AB.style.backgroundColor === "pink") {
    AB.style.backgroundColor = "red";
  } else if (AB.style.backgroundColor === "red") {
    AB.style.backgroundColor = "orange";
  }
});
<div id="AB">Words</div>
<button id="next">Button</button>

user_112609910

As ggorlen commented you can get the style by using the getComputedStyle() and then compare it against the CSS background-color property. Check out getComputedStyle on MDN.

next.addEventListener("click", () => {
  if (getComputedStyle(AB).getPropertyValue("background-color") === "rgb(255, 192, 203)") {
    AB.style.backgroundColor = "red";
  } else if (AB.style.backgroundColor === "red") {
    AB.style.backgroundColor = "orange";
  }
});
#AB {
  background-color: pink;
}
<div id="AB">Words</div>
<button id="next">Button</button>

user_172284840

You cant use next and AB just like that. you have to use document.getElementById("ID_NAME")

then element.style property can be used only when the style HTML attribute is used to style an element(like in below example)

to access css properties you have to use getComputedStyle function like the second example and style returned by getComputedStyle is not writable so you have to use first method to write.

let next = document.getElementById("next");
let AB = document.getElementById("AB");

next.addEventListener("click", () => {
  if (AB.style.backgroundColor === "pink") {
    AB.style.backgroundColor = "red";
  } else if (AB.style.backgroundColor === "red") {
    AB.style.backgroundColor = "orange";
  }
});
<div id="AB" style="background-color: pink;">Words</div>
<button id="next">Button</button>

let next = document.getElementById("next");
let AB = document.getElementById("AB");

next.addEventListener("click", () => {
const style = getComputedStyle(AB)
console.log(style.backgroundColor)
  if (style.backgroundColor === "rgb(255, 192, 203)") {
    AB.style.backgroundColor = "red";
  } else if (style.backgroundColor === "rgb(255, 0, 0)") {
    AB.style.backgroundColor = "orange";
  }
});
#AB {
  background-color: pink;
}
<div id="AB">Words</div>
<button id="next">Button</button>

user_153952880
Related