I have this problem:

<a href="#" class="btn btn-lg btn-default" onclick="red()">Change Background</a> function red(){ document.body.style.backgroundColor="#C0C0C0"; }

Created a button on the page that changes the background. And how to make it so that when you click on the same button, everything returns to its original state, and so it switches from one background to another with each press?

    4 answers 4

      function red() { document.body.classList.toggle('red-background'); } 
     body { background-color: #FFFFFF; } body.red-background { background-color: red; } 
     <a href="#" onclick="red()">Change Background</a>

    • The best option from (yet) proposed. - cyadvert
    • Thanks Pavel! - Edgar Kiljak
    • @EdgarKiljak is always welcome. If you are satisfied with the answer, then you can accept it to close the question - Pavel Parshin

    Well then, I would do like this. But this is clearly not the best option.

     <a href="" onclick="bgcolor()">Change Background</a> <script> k=1; function bgcolor(){ if (k==1) { document.body.style.backgroundColor="#C0C0C0"; k=0; } else { document.body.style.backgroundColor="#FFFFFF"; k=1; } } </script>
    • In general, I like the version of Comrade Pavel Parshin much more :) - Telion

    This option is suitable?

     var currentColor = '#FFFFFF'; // внешняя переменная будет зранить текущий цвет function red() { // смотрим, какой цвет фона сейчас. if (currentColor=="#C0C0C0") {// если фон #С0С0С0 setColor = '#FFFFFF'; // будем менять на белый } else { setColor = '#C0C0C0'; // иначе, будем менять на серый } currentColor = setColor; // запоминаем цвет, чтобы знать в будущем текущий document.body.style.backgroundColor = setColor; // именно замена фона }

    However, the @PavelParshin option is better than this. I advise you to use it.

    • Thank you, but do not want to work - Edgar Kiljak
    • why do you need currentColor if you don't use it anywhere? - Grundy
    • @EdgarKiljak, describe exactly how exactly does not want to work, gives an error? doing nothing? doing wrong? - Grundy
    • fixed. Grundy - thanks :) blundered ... - cyadvert
    • After fixing everything began to work, thank you so much! I would be even more grateful if you could explain to me every step - Edgar Kiljak

    Another option with the object

     document.body.style.backgroundColor = '#FFFFFF'; var colors = { "red": document.body.style.backgroundColor }; colors[document.body.style.backgroundColor] = "red"; print_color(); function red() { document.body.style.backgroundColor = colors[document.body.style.backgroundColor]; print_color(); } function print_color() { document.getElementById('p').innerHTML = JSON.stringify(colors, function(key, value) { if (key == "") return value; return value + (document.body.style.backgroundColor == key ? " - next color" : ""); }, 2); } 
     body { background-color: #FFFFFF; } body.red-background { background-color: red; } 
     <a href="#" onclick="red();">Change Background</a> <pre id="p"></pre>