It appears that you forgot to properly close your function in the code snippet below:
$(document).ready(function() {
$('#btn').click(function() {
$('body').css('background', '#ff0000', '#80ff33');
});
});
Here is a 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 have various methods at your disposal, one of which involves updating a CSS custom property.
For example, using a data-attribute, you can easily add multiple button colors as shown below:
DEMO or see the snippet provided 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>
- Equivalent JQuery 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>