Javascript, change colour of element on-click with if-statement

February 17, 2021 by admin

I have no idea how to change the colour of my element if the colour’s crimson to white. It has me confused because I’ve tried many solutions such as turning them into variables. Would anyone be able to tell me what I’m doing wrong, or possibly point me in the right direction? I’ve tried "duplicate" questions, but none of them really share the same issue.

<button class="btn-startcall10" onclick="recorda()"><i class="fa fa-wave-square"></i> </button>

  function recorda() {
    document.getElementsByClassName("fa-wave-square")[0].style.color = "crimson";
      if () {}
  }

16 thoughts on “Javascript, change colour of element on-click with if-statement”

You can use Element.style.color in the javascript to get the current color of the element.

Then based on that color you can change the color of your element.

let clickElement = document.getElementById("span-to-change-color");

clickElement.addEventListener("click", changeColor);

function changeColor() {

  if (clickElement.style.color == "red") {
    clickElement.style.color = "blue";
  } else {
    clickElement.style.color = "red";
  }
}

<span style="color: red;" id="span-to-change-color">I am red(Click Me)</span>

you can try something like this

 function changeColor(){
    el = document.getElementById("fa-wave-square");
  if(el.style.color === 'crimson'){
    el.style.color = 'white';
  } else {
    el.style.color = 'crimson';
  }
 }

https://jsfiddle.net/Lyuvf9a6/3/