CODEWITHSUNDEEP
javascripthtmlclicktoggleaddeventlistener
idksoiputthis
idksoiputthis

Reputation: 121

How to switch between two different colors with one button using javascript

Im trying to change between two colors when I click on the event listener using JavaScript. When I trigger the click event, it changes the color to black. When I click on it again, I want it to change back to the default, which is white. I think that an if statement is involved, but Im not sure how the logic would work in this case. 

<!DOCTYPE html>
<html>
<head>
  <title>Light Switch</title>
  <link rel="stylesheet" href="light.css" />

</head>

<body id="body">

<button id="submit">Submit
  <label id="switch">
    <input type="checkbox" checked>
    <span class="slider"></span>
  </label>
</button>

<script src="light.js"></script>
</body>
</html>



function start() {
  var submit = document.getElementById("submit");
  submit.addEventListener("click", toggle);
};

function toggle() {
  var color = document.getElementById("body");
  color.style.backgroundColor = "black";
};


start();

Upvotes: 2

Views: 7465

Answers (4)

Master
Master

Reputation: 31

  function start() {
    var submit = document.getElementById("submit");
    submit.addEventListener("click", toggle);
  };

  function toggle() {
    var color = document.getElementById("body");

    if(color.style.backgroundColor==='black')
      color.style.backgroundColor='';
    else
    color.style.backgroundColor = "black";

  };

  start();

Upvotes: 0

Suren Srapyan
Suren Srapyan

Reputation: 68645

You can use toggle function on the classList of that element. Add a class and toggle it.

function start() {
  var submit = document.getElementById("submit");
  submit.addEventListener("click", toggle);
};

function toggle() {
  var color = document.getElementById("body");
  color.classList.toggle('black');
};


start();
.black {
  background-color: black;
}
<body id="body">
   <button id="submit">Submit
      <label id="switch">
          <input type="checkbox" checked>
          <span class="slider"></span>
      </label>
   </button>
</body>

You can also just check the current color and switch every time.

function start() {
  var submit = document.getElementById("submit");
  submit.addEventListener("click", toggle);
};

function toggle() {
  var color = document.getElementById("body");
  var backColor = color.style.backgroundColor;
  color.style.backgroundColor = backColor === "black" ? "white" : "black";
};


start();
<body id="body">
   <button id="submit">Submit
      <label id="switch">
          <input type="checkbox" checked>
          <span class="slider"></span>
      </label>
   </button>
</body>

Upvotes: 4

pawas kr. singh
pawas kr. singh

Reputation: 436

Do like this, i think it work for you...

var background = document.getElementById(id).style.background;
var btn = addEventListener("click", function (){
    if(background = "rgb(255,145,0)"){
        document.getElementById(id).style.background = "red";
    }
    else
    {
        document.getElementById(id).style.background = "white";
    }
});

Upvotes: 0

Satpal
Satpal

Reputation: 133403

Instead of manipulating backgroundColor, You can create CSS class and add/remove it to the element using classList property

function start() {
  var submit = document.getElementById("submit");
  submit.addEventListener("click", toggle);
};

function toggle() {
  var color = document.getElementById("body");
  color.classList.toggle("black");
};


start();
.black {
  background-color: black;
}
<div id="body">

  <button id="submit">Submit
  <label id="switch">
    <input type="checkbox" checked>
    <span class="slider"></span>
  </label>
</button>


</div>

Upvotes: 2

Related Questions