stackoom
  简体   繁体   中英

How to change the background colour after clicking the button

 原文  2022-07-09 06:17:55  3   2    javascript/ html/ css

Question

I have created a button. I want to click the button and then randomly change the background colour. And also on the web page, I need to show the RGB colour code that the web page currently shows.

Please help me to solve this matter. Here is my code so far: 

 let r=Math.round(Math.floor((Math.random() * 255) + 0)); let g=Math.round(Math.floor((Math.random() * 255) + 0)); let b=Math.round(Math.floor((Math.random() * 255) + 0)); let colourCode = document.querySelector('.colourCode'); let button = document.querySelector('.button'); let code= [r,g,b]; button.addEventListener('click', ()=>{ let colour = document.body.style.backgroundColor = 'rgb(200, 0, 0)'; document.querySelector('.colourCode').innerText= colour; });
 body{ margin: 0%; display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; gap: 20px; } .button button{ height: 3rem; width: 8rem; font-size: larger; cursor: pointer; } .colourCode{ font-size: medium; padding: 0 15px 0 15px; width: auto; background-color: antiquewhite; font-size: 2rem; font-weight: 600; text-align: center; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="colourCode"></div> <div class="button"><button>Click Me</button></div> <script src="script.js"></script> </body>

2 answers

solution1
 1  2022-07-09 06:25:47

Put your code that calculates the random values of r , g , and b values in the function that is called when the button is clicked. 

 let button = document.querySelector('.button'); button.addEventListener('click', () => { let r = Math.round(Math.floor((Math.random() * 255) + 0)); let g = Math.round(Math.floor((Math.random() * 255) + 0)); let b = Math.round(Math.floor((Math.random() * 255) + 0)); let colour = document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; document.querySelector('.colourCode').innerText = colour; });
 body { margin: 0%; display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; gap: 20px; } .button button { height: 3rem; width: 8rem; font-size: larger; cursor: pointer; } .colourCode { font-size: medium; padding: 0 15px 0 15px; width: auto; background-color: antiquewhite; font-size: 2rem; font-weight: 600; text-align: center; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="colourCode"></div> <div class="button"><button>Click Me</button></div> <script src="script.js"></script> </body>

solution2
 0  2022-07-09 06:26:15

You're almost there. You just need to use your random numbers r , g , b to the style and element text. 

 let colourCode = document.querySelector('.colourCode'); let button = document.querySelector('.button'); button.addEventListener('click', ()=>{ let r=Math.round(Math.floor((Math.random() * 255) + 0)); let g=Math.round(Math.floor((Math.random() * 255) + 0)); let b=Math.round(Math.floor((Math.random() * 255) + 0)); let colour = document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; document.querySelector('.colourCode').innerText= colour; });
 body{ margin: 0%; display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; gap: 20px; } .button button{ height: 3rem; width: 8rem; font-size: larger; cursor: pointer; } .colourCode{ font-size: medium; padding: 0 15px 0 15px; width: auto; background-color: antiquewhite; font-size: 2rem; font-weight: 600; text-align: center; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="colourCode"></div> <div class="button"><button>Click Me</button></div> <script src="script.js"></script> </body>

You also can use hex for color randomization

 let colourCode = document.querySelector('.colourCode'); let button = document.querySelector('.button'); button.addEventListener('click', ()=>{ const colour = Math.floor(Math.random()*16777215).toString(16); document.body.style.backgroundColor = `#${colour}`; document.querySelector('.colourCode').innerText = `#${colour}`; });
 body{ margin: 0%; display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; gap: 20px; } .button button{ height: 3rem; width: 8rem; font-size: larger; cursor: pointer; } .colourCode{ font-size: medium; padding: 0 15px 0 15px; width: auto; background-color: antiquewhite; font-size: 2rem; font-weight: 600; text-align: center; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="colourCode"></div> <div class="button"><button>Click Me</button></div> <script src="script.js"></script> </body>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to change webpage background colour multiple times by clicking on the same button? How to change button colour after clicking another button Change background and text colour by clicking on a button How do I change the background color of button after clicking on it? How to randomly change the background color of the button by clicking on it? How to change background color of button while clicking on it How to change background color to linear gradient with colors entered in the input tags and mixed after clicking GO button? How can I change background colour of a button on key press? How to change color button after clicking on it how to change the value of data after clicking a button
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM