Is it possible to change the background color and back to the original in plain javascript every time i click a button?

Question

I can't seem to see any results on google unless I use jQuery and I'm not so sure if jQuery and javascript plain work together.

Answer 1

Try using data-* attribute to store color replacement, original background color of button element or initial setting; JSON.parse() , JSON.stringify() , Array.prototype.reverse() to toggle data-* attribute values that set background of input type="button" element; onclick event.

Not certain if requirement is to toggle background color, or reset to original color once ?

<input type="button" value="button" data-colors='["blue", "buttonface"]' onclick="this.style.background = JSON.parse(this.dataset.colors)[0]; this.dataset.colors = JSON.stringify(JSON.parse(this.dataset.colors).reverse());" />

Answer 2

jQuery will not conflict with javascript, it is just a js library :) So you can use the selector.css() of jquery or, in standard js i think it is (element).style.background = color.

I recommend using jQuery. Here is a SIMPLE jQuery way to do it:

  $("#button").click(function(){ 
   $("#tochange").css("background-color", "colorhex");
  });

If you want to swap colors you could, for example, add a variable.

var x;
$("#button").click(function(){
if(x==0){
    $("#tochange").css("background-color", "colorhex"); 
    x= 1;
 } 
 else{other way round} 
});