How to change the background colour after clicking the button-CodePudding

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.

thank you! Ravindu.

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 ></div>
    <div ><button>Click Me</button></div>
    
    <script src="script.js"></script>
</body>

CodePudding user response：

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 ></div>
  <div ><button>Click Me</button></div>

  <script src="script.js"></script>
</body>

CodePudding user response：

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 ></div>
    <div ><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 ></div>
    <div ><button>Click Me</button></div>
    
    <script src="script.js"></script>
</body>