There was a small problem - when you press the button, the color of the block changes, but it changes only once and for one color. Tz need a button that changes color with each click, but the colors should be different. How to reproduce all this in reality? Thank! Sample code attached:

//пСрвая ΠΊΠ½ΠΎΠΏΠΊΠ° $(document).ready(function() { $('#button-1').click(function() { $('.main-content-1').css('background-color', 'blue'); }); }); //вторая ΠΊΠ½ΠΎΠΏΠΊΠ° $(document).ready(function() { $('#button-2').click(function() { $('.main-content-2').css('background-color', 'green'); }); }); 
 html, body { height: 100%; font-size: 1.5em; } body { margin: 0; color: #302E2D; display: flex; flex-direction: column; } .wrapper { display: flex; flex-direction: column; height: 100%; } header { padding: 30px 60px; background: black; color: white; } .container { margin-top: 30px; margin-bottom: 30px; flex: 1 0 auto; padding: 30px; align-items: flex-start; flex-wrap: wrap; display: flex; } .main-content-1 { margin-right: 30px; width: 30%; margin-left: 5%; margin-right: 17%; background: lightblue; padding: 30px; text-align: center; } .main-content-2 { background-color: tomato; width: 30%; padding: 30px; text-align: center; } .row { display: flex; } footer { padding: 30px 60px; background-color: black; color: white; flex: 0 0 auto; } #button-1 { background-color: white; color: black; text-align: center; width: 100%; cursor: pointer; } #button-2 { background: white; color: black; text-align: center; margin-top: 3%; cursor: pointer; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <header>Π¨Π°ΠΏΠΊΠ°</header> <div class="container"> <div class="row"> <div class="main-content-1"> <p>dfgs sregsre gse sgsr gsrg srg sr gsfg fdg </p> </div> <div class="main-content-2"> <p> fhgdohgoesh od uth iodo ood do doood oo dijtoid h toh doi dotoi ho ohoh oih o </p> </div> </div> </div> <footer> <div id="button-1"> Click on me </div> <div id="button-2"> Click on me again </div> </footer> </div>

    1 answer 1

    The simplest way is to generate a random number using Math.random() and then use it as a hue value in the HSL color model (hue, saturation, brightness):

     //пСрвая ΠΊΠ½ΠΎΠΏΠΊΠ° $(document).ready(function() { $('#button-1').click(function() { $('.main-content-1').css('background-color', `hsl(${Math.floor(Math.random() * 170) * 2},100%,50%)`); }); }); //вторая ΠΊΠ½ΠΎΠΏΠΊΠ° $(document).ready(function() { $('#button-2').click(function() { $('.main-content-2').css('background-color', `hsl(${Math.floor(Math.random() * 340)},100%,50%)`); }); }); 
     html, body { height: 100%; font-size: 1.5em; } body { margin: 0; color: #302E2D; display: flex; flex-direction: column; } .wrapper { display: flex; flex-direction: column; height: 100%; } header { padding: 30px 60px; background: black; color: white; } .container { margin-top: 30px; margin-bottom: 30px; flex: 1 0 auto; padding: 30px; align-items: flex-start; flex-wrap: wrap; display: flex; } .main-content-1 { margin-right: 30px; width: 30%; margin-left: 5%; margin-right: 17%; background: lightblue; padding: 30px; text-align: center; } .main-content-2 { background-color: tomato; width: 30%; padding: 30px; text-align: center; } .row { display: flex; } footer { padding: 30px 60px; background-color: black; color: white; flex: 0 0 auto; } #button-1 { background-color: white; color: black; text-align: center; width: 100%; cursor: pointer; } #button-2 { background: white; color: black; text-align: center; margin-top: 3%; cursor: pointer; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <header>Π¨Π°ΠΏΠΊΠ°</header> <div class="container"> <div class="row"> <div class="main-content-1"> <p>dfgs sregsre gse sgsr gsrg srg sr gsfg fdg </p> </div> <div class="main-content-2"> <p> fhgdohgoesh od uth iodo ood do doood oo dijtoid h toh doi dotoi ho ohoh oih o </p> </div> </div> </div> <footer> <div id="button-1"> Click on me </div> <div id="button-2"> Click on me again </div> </footer> </div>

    • Thanks for the help!) - Artem K