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>