CODEWITHSUNDEEP
javascripthtmlcssrandom
rabie
rabie

Reputation: 1

Button to change background color randomly

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
    document.body.style.backgroundColor = changeC()
});

var x = Math.floor(Math.random() *256);
    y = Math.floor(Math.random() * 256);
    z = Math.floor(Math.random() * 256);

function changeC() { 
    return  "rgb(" + x + "," + y + "," + z + ")";
};

First click changes the background color.
Consecutive clicks don't.
How to modify code so that consecutive clicks will also change the background color randomly?

Upvotes: 0

Views: 656

Answers (5)

mrwolferinc
mrwolferinc

Reputation: 153

Try this:

$('#btn').on('click', function() {
  var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  document.body.style.backgroundColor = randomColor;
});
@import 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap';

html, body {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  background: -moz-linear-gradient(top, white 0%, #e5e5e5 100%);
  background: -webkit-linear-gradient(top, white 0%, #e5e5e5 100%);
  background: linear-gradient(to bottom, white 0%, #e5e5e5 100%);
  border: 1px solid #aaa;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  padding: 5px;
}

button:hover {
  border-color: #888;
}
<button id="btn">
  Click me
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Upvotes: 0

user2740650
user2740650

Reputation: 1753

Your x y and z variables were assigned only once, as the program started up, because they were at the top-level scope. To reassign them each time, move them into the function as shown.

const btn = document.getElementById('btn');


btn.addEventListener('click', () => {
    document.body.style.backgroundColor = changeC()
});

function changeC() { 
    var x = Math.floor(Math.random() *256),
        y = Math.floor(Math.random() * 256),
        z = Math.floor(Math.random() * 256);

    return  "rgb(" + x + "," + y + "," + z + ")";
};

Upvotes: 1

smunteanu
smunteanu

Reputation: 542

const btn = document.getElementById('btn');


btn.addEventListener('click', () => {
    document.body.style.backgroundColor = changeC()
});

function changeC() { 
    // x, y and z have to be in the scope of the function so they refresh every time you call the function
    var x = Math.floor(Math.random() *256), // This is , not ;
    y = Math.floor(Math.random() * 256), // This is , not ;
    z = Math.floor(Math.random() * 256);
    return "rgb(" + x + "," + y + "," + z + ")";
};
body {width: 100vw, height: 100vh}
<h1>This works</h1>
<button id="btn"> PRESS ME </button>

Upvotes: 0

Mehrzad Tejareh
Mehrzad Tejareh

Reputation: 633

update your function same as follow:

function changeC() { 
    x = Math.floor(Math.random() *256);
    y = Math.floor(Math.random() * 256);
    z = Math.floor(Math.random() * 256);
    return  "rgb(" + x + "," + y + "," + z + ")";
};

Upvotes: 0

Harkal
Harkal

Reputation: 1828

run this code

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<button id="btn">change color</button>

<script>
const btn = document.getElementById('btn');


btn.addEventListener('click', () => {
    document.body.style.backgroundColor = changeC()
});


function changeC() { 

var x = Math.floor(Math.random() * 256);
    y = Math.floor(Math.random() * 256);
    z = Math.floor(Math.random() * 256);
    return  "rgb(" + x + "," + y + "," + z + ")";
};

</script>

</body>
</html>

Upvotes: 0

Related Questions