如何通过单击随机更改按钮的背景颜色？

Question

我有一个按钮，该按钮完全覆盖了我的HTML页面，通过单击它，按钮的backgroundColor应该更改为其他颜色。

我已经尝试从不同来源使用此代码：“ Math.floor（Math.random（）* 16777215）.toString（16）”，但是我想我并不完全了解在哪里使用它。

**JS:**
var randomColor = Math.floor(Math.random()*16777215).toString(16);
document.getElementsById("mainButton").style.background = randomColor;


**HTML:**
<button id="mainButton">click</button>

**CSS:**
#mainButton{
  background-color: white;
  font-family: monospace;
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

有什么可以帮助我的吗？ 谢谢！

Answer 1

这里有几处错误：

1）它的getElementById不是getElementsById 。

2）您需要设置style.backgroundColor ，而不是直接设置style属性。

3）您的randomColor将导致一个十六进制值，您需要在开头添加“＃”。

这是一个有效的例子

 var randomColor = Math.floor(Math.random()*16777215).toString(16); document.getElementById("mainButton").style.backgroundColor = '#' + randomColor; 

 #mainButton{ background-color: white; font-family: monospace; border: none; width: 100%; height: 100%; position: absolute; right: 0; top: 0; } 

 <button id="mainButton">click</button> 

Answer 2

 let button = document.getElementsByTagName('button')[0]; function RBC (e) { button.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16); } button.addEventListener("click", RBC); window.onload = RBC(); 

 button { display:block; margin:auto; height:35px; width:95%; text-shadow:1px 1px 0.5px #000; border:solid 1px #000; font-size:18px; color:#ccc; cursor:pointer; } 

 <button>Click Here</button> 

Answer 3

W3Schools上有一个相当简单的演示，向您展示了如何创建随机颜色：

https://www.w3resource.com/javascript-exercises/javascript-math-exercise-40.php

在您的情况下，无需更改主体背景颜色，而是将按钮作为目标并进行更改。 就像是：

 const myBtn = document.getElementByID("mybutton");
 myBtn.style.backgroundColor = bgColor;