Facing problem with getting JS button to work-CodePudding

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?

CodePudding user response：

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" >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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>