JQuery - change page background colour on button click
background-color, css, jquery, onclick
Solution
$( "#change_background" ).on( "click", function() {
$("body").css("background-color","#000000");
});
Here you have an example.
Problem
I'm very new to jquery and am trying to change the page background colour once a button is clicked. I have searched and there are a quite a few questions on similar things, but I'm looking for an answer on a page background colour change specifically. I'd appreciate any help, thanks, Freddie HTML: ``` <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <section class="text"> CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND! </section> <button id="btn">CLICK ME!</button> </body> </html> ``` CSS: ``` 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; color: #ffffff; } ``` JS: ``` $(button).click(function() { $(this).css('background', '#ff0000'); )}; ```