Question

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

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

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

而不是直接设置样式属性。

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;

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

3 个答案: