随机更改背景颜色的按钮答案

【问题标题】：Button to change background color randomly随机更改背景颜色的按钮
【发布时间】：2020-09-27 14:53:11
【问题描述】：

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

第一次点击会改变背景颜色。
连续点击不会。
如何修改代码让连续点击也随机改变背景颜色？

【问题讨论】：

将 x y z 放入函数中
请注意 y 和 z 不是 var 的一部分，因为 var 以分号 (;) 结尾。在y 和z 之前添加var，或者将x 和y 之后的分号替换为逗号（,）。

标签： javascript html css random

【解决方案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 + ")";
};

【讨论】：

@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+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>

【讨论】：