使用事件侦听器(Javascript、jQuery)将 BG 颜色更改为随机颜色?
Posted
技术标签:
【中文标题】使用事件侦听器(Javascript、jQuery)将 BG 颜色更改为随机颜色?【英文标题】:Using Event Listeners (Javascript, jQuery) to change BG color to a random color? 【发布时间】:2020-04-16 19:21:22 【问题描述】:我正在尝试一个简单的随机背景颜色生成器。当用户单击按钮时,背景颜色会变为随机的 RGB 值。但是,我还希望按钮本身在单击时更改为随机颜色。
我尝试将 DOM 操纵器放入事件侦听器和随机 RGB 函数中。但是我不断收到此错误消息:
script.js:19 Uncaught TypeError: Cannot set property 'backgroundColor' of undefined
at randomBgColor (script.js:19)
at htmlButtonElement.<anonymous> (script.js:7)
randomBgColor @ script.js:19
(anonymous) @ script.js:7
代码如下:
<html>
<button id="press" class="button">Press me to change the background color!</button>
</html>
var changeColor = document.getElementById("press");
var button = document.getElementsByClassName("button");
changeColor.addEventListener("click", function()
randomBgColor();
)
function randomBgColor()
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = 'rgb(' + x + ',' + y + ',' + z + ')';
console.log(bgColor);
document.body.style.background = bgColor;
button.style.backgroundColor = bgColor;
【问题讨论】:
这能回答你的问题吗? What do querySelectorAll and getElementsBy* methods return? 简而言之,getElementsByClassName
返回一个列表(注意复数“元素”),而不是一个列表。请注意,您已经将按钮元素设置为 changeColor
...
我的回答满意吗?如果是这样,请用接受的复选标记标记一个并投票。谢谢!
【参考方案1】:
在您的代码中,changeColor
是按钮。将此变量名重构为button
,如下所示:
var button = document.getElementById("press");
button.addEventListener("click", function()
randomBgColor();
)
function randomBgColor()
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = 'rgb(' + x + ',' + y + ',' + z + ')';
console.log(bgColor);
document.body.style.background = bgColor;
button.style.backgroundColor = bgColor;
作为奖励,这是实现randojs.com 的代码的简化版本:
var button = document.getElementById("press");
button.addEventListener("click", randomBgColor);
function randomBgColor()
var bgColor = 'rgb(' + rando(255) + ',' + rando(255) + ',' + rando(255) + ')';
document.body.style.background = bgColor;
button.style.backgroundColor = bgColor;
<script src="https://randojs.com/1.0.0.js"></script>
<button id="press">Change color!</button>
【讨论】:
以上是关于使用事件侦听器(Javascript、jQuery)将 BG 颜色更改为随机颜色?的主要内容,如果未能解决你的问题,请参考以下文章
删除侦听器类不会停止与 Jquery Javascript 相关的声音事件
chrome扩展跟踪前端JavaScript,该JavaScript使用DOM/jQueryAPI在运行时操作html-DOM元素(例如,更改样式、附加事件侦听器)。