Home » Jquery » html – Change color of a background on click to a multiple choice of color us with jquery

html – Change color of a background on click to a multiple choice of color us with jquery

Posted by: admin February 22, 2020 Leave a comment

Questions:

I am trying to add multiple color choices? How can I do it with HTML and CSS?
i dont know how to correctly add multiple color choice
here are my codes

$(document).ready(function() {
      $('#btn').click(function() {
        $('body').css('background', '#ff0000', '#80ff33');
      });
body {
  height: ;
  background: #D8D8D8;
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

#btn {
  margin-left: 550px;
  width: 200px;
  height: 100px;
  font-size: 2em;
  border-radius: 10px;
  background: #ffffff;
}

#btn:hover {
  background: #ff0000;
  background: #80ff33;
  color: #ffffff;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn">CLICK ME!</button>
How to&Answer:

You did not close properly your function

$(document).ready(function() {
  $('#btn').click(function() {
    $('body').css('background', '#ff0000', '#80ff33');
  });
});

demo :

$(document).ready(function() {
  $('#btn').click(function() {
    $('body').css('background', '#ff0000', '#80ff33');

  });

});
body {
    height: ;
    background: #D8D8D8;
}

.text {
    color: #686868; 
    font-family: arial;
    font-size: 2em;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

#btn {
    margin-left: 550px;
    width: 200px;
    height: 100px;
    font-size: 2em;
    border-radius: 10px;
    background: #ffffff;
}

#btn:hover {
    background: #ff0000;
    background: #80ff33 ;
    color: #ffffff;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn">CLICK ME!</button>

you may use a few methods, one is to update a css custom property

Possible example from a data-attribute , so you can easily add as many button colors you wish:

  • javascript version

DEMO or snippet below

for (let e of document.querySelectorAll("button")) {
  cust = e.dataset.bgcolor;
  e.style.background = cust;
  e.textContent = cust;
  e.addEventListener("click", function() {
    cust = e.dataset.bgcolor;
    document.documentElement.style.setProperty("--bgColor", cust);

  });
}
html {
  background: #D8D8D8;
}

body {
  margin: 0;
  height: 100vh;
  background: var(--bgColor);
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  width: 200px;
  grid-template-columns: repeat(2, 1fr);
  margin: auto;
}
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<div class="grid">
  <button data-bgcolor="orange">bgcolor:</button>
  <button data-bgcolor="white">bgcolor:</button>
  <button data-bgcolor="lightblue">bgcolor:</button>
  <button data-bgcolor="lightgreen">bgcolor:</button>
  <button data-bgcolor="brown">bgcolor:</button>
  • jQuery equivalent snippet :
$("button").each(function() {
  bg = $(this).data("bgcolor");
  $(this).css("background", bg);
  $(this).html(bg);
  $(this).click(function() {
    bg = $(this).data("bgcolor");
    $("html").css("--bgColor", bg);
  });
});
html {
  background: #D8D8D8;
}

body {
  margin: 0;
  height: 100vh;
  background: var(--bgColor);
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  width: 200px;
  grid-template-columns: repeat(2, 1fr);
  margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<div class="grid">
  <button data-bgcolor="orange">bgcolor:</button>
  <button data-bgcolor="white">bgcolor:</button>
  <button data-bgcolor="lightblue">bgcolor:</button>
  <button data-bgcolor="lightgreen">bgcolor:</button>
  <button data-bgcolor="brown">bgcolor:</button>

Answer:

you can change the body color on click with that on click event

body {
    height: ;
    background: #D8D8D8;
}

.text {
    color: #686868; 
    font-family: arial;
    font-size: 2em;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

#btn {
    margin-left: 550px;
    width: 200px;
    height: 100px;
    font-size: 2em;
    border-radius: 10px;
    background: #ffffff;
}

#btn:hover {
    background: #ff0000;
    background: #80ff33 ;
    color: #ffffff;
}
</script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn" onclick="document.body.style.backgroundColor = 'green';">Click Me</button>

Answer:

$(document).ready(function() {
  $('#btn').click(function() {
    $('body').css('background', '#ff0000', '#80ff33');

  });

});
body {
  height: ;
  background: #D8D8D8;
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

#btn {
  margin-left: 550px;
  width: 200px;
  height: 100px;
  font-size: 2em;
  border-radius: 10px;
  background: #ffffff;
}

#btn:hover {
  background: #ff0000;
  background: #80ff33;
  color: #ffffff;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn">CLICK ME!</button>