Кнопка для случайного изменения цвета фона

#javascript #html #css #random

#javascript #HTML #css #Случайный

Вопрос:

 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   ")";
};

Первый щелчок изменяет цвет фона.
Последовательные нажатия этого не делают.
Как изменить код, чтобы последовательные нажатия также меняли цвет фона случайным образом?

1. поместите x y z в функцию

2. Обратите внимание, что y и z не являются частью var , потому var что заканчиваются точкой с запятой ( ; ) . Либо добавьте var перед y и z , либо замените точку с запятой после x и y на запятую ( , ).

Ответ №1:

Ваши x y z переменные и были назначены только один раз при запуске программы, потому что они находились в области верхнего уровня. Чтобы переназначать их каждый раз, переместите их в функцию, как показано.

 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   ")";
};

1. @iAmOren указал, что ваши y и z не были частью var инструкции. Я исправил это в своем ответе, используя , вместо ; . Раньше это работало бы, но y и z были бы глобальными переменными, а не локальными для changeC функции.

Ответ №2:

запустите этот код

 <!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>

Ответ №3:

обновите свою функцию так же, как показано ниже:

 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   ")";
};

Ответ №4:

 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>

Ответ №5:

Попробуйте это:

 $('#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 Sansamp;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>