Question

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

第一次单击将更改背景颜色。
连续点击不会。
如何修改代码，以便连续单击也可以随机更改背景颜色？

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

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

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

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

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

按钮随机更改背景颜色

5 个答案: