Javascript 背景颜色更改：addEventListener不工作_Javascript_Html_Css

Javascript 背景颜色更改：addEventListener不工作

javascript html css

Javascript 背景颜色更改：addEventListener不工作,javascript,html,css,Javascript,Html,Css,我的eventListener似乎无法工作我有中间的按钮，背景颜色是红色的，但是当我点击按钮来改变背景颜色时，它就不起作用了。提前谢谢 HTML: CSS: 所以，有两件事 HTML中没有类为“color”的元素第二，你的随机数不是真正的随机数。但我相信你正在实现这一目标。但是，我将在下面的代码片段中介绍如何随机分配颜色这里有一个固定版本： const colors=[“绿色”、“红色”、“蓝色”、“黄色”]； const btn=document.getElementById（'bt

我的eventListener似乎无法工作

我有中间的按钮，背景颜色是红色的，但是当我点击按钮来改变背景颜色时，它就不起作用了。提前谢谢

HTML:

CSS:

所以，有两件事

HTML中没有类为“color”的元素

第二，你的随机数不是真正的随机数。但我相信你正在实现这一目标。但是，我将在下面的代码片段中介绍如何随机分配颜色

这里有一个固定版本：

const colors=[“绿色”、“红色”、“蓝色”、“黄色”]；
const btn=document.getElementById（'btn'）；
const color=document.querySelector（'.color'）；
//此函数返回从最小值到最小值+范围的随机数
常量getRandomNumber=（最小值，范围）=>{
返回Math.floor（Math.random（）*范围+min）
}
btn.addEventListener（'click'，function（）{
常量随机数=getRandomNumber（0，colors.length）；
document.body.style.backgroundColor=颜色[随机数]；
color.textContent=颜色[随机数]；
});
按钮{
位置：绝对位置；
最高：50%；
左：50%；
}
身体{
背景色：红色；
}
.颜色{
显示：内联块；
背景色：白色；
填充：20px 30px；
}
点击我
红色
所以，有两件事
HTML中没有类为“color”的元素
第二，你的随机数不是真正的随机数。但我相信你正在实现这一目标。但是，我将在下面的代码片段中介绍如何随机分配颜色
这里有一个固定版本：

const colors=[“绿色”、“红色”、“蓝色”、“黄色”]；
const btn=document.getElementById（'btn'）；
const color=document.querySelector（'.color'）；
//此函数返回从最小值到最小值+范围的随机数
常量getRandomNumber=（最小值，范围）=>{
返回Math.floor（Math.random（）*范围+min）
}
btn.addEventListener（'click'，function（）{
常量随机数=getRandomNumber（0，colors.length）；
document.body.style.backgroundColor=颜色[随机数]；
color.textContent=颜色[随机数]；
});
按钮{
位置：绝对位置；
最高：50%；
左：50%；
}
身体{
背景色：红色；
}
.颜色{
显示：内联块；
背景色：白色；
填充：20px 30px；
}
点击我
红色
首先，HTML中没有任何名为.color
的类，还有常量randomNumber=2看起来不太随机。在这里，我通过添加一个带有classcolor
的简单div为您解决了这两个问题。还有一个简单的数学函数，可以给你一个0到3之间的随机整数来覆盖你所有的颜色。看一看

const colors=[“绿色”、“红色”、“蓝色”、“黄色”]；
const btn=document.getElementById（'btn'）；
const color=document.querySelector（'.color'）；
btn.addEventListener（'click'，function（）{
const randomNumber=Math.floor（Math.random（）*4）
document.body.style.backgroundColor=颜色[随机数]；
color.textContent=颜色[随机数]；
});
按钮{
位置：绝对位置；
最高：50%；
左：50%；
}
身体{
背景色：红色；
}
点击我
颜色名称将显示在这里
首先，HTML中没有任何名为.color
的类，还有常量randomNumber=2看起来不太随机。在这里，我通过添加一个带有classcolor
的简单div为您解决了这两个问题。还有一个简单的数学函数，可以给你一个0到3之间的随机整数来覆盖你所有的颜色。看一看

const colors=[“绿色”、“红色”、“蓝色”、“黄色”]；
const btn=document.getElementById（'btn'）；
const color=document.querySelector（'.color'）；
btn.addEventListener（'click'，function（）{
const randomNumber=Math.floor（Math.random（）*4）
document.body.style.backgroundColor=颜色[随机数]；
color.textContent=颜色[随机数]；
});
按钮{
位置：绝对位置；
最高：50%；
左：50%；
}
身体{
背景色：红色；
}
点击我
颜色名称将显示在这里

HTML中没有选择器类为.color
的元素，因此color.textContent
将返回null
您没有从数组中解析随机值的代码。您只需调用数组的第三个索引valueconst randomNumber=2这将始终为您提供蓝色，因为它是第三个值0=>绿色，1=>红色，2=>蓝色

以下应该是您正在寻找的内容

const colors=[“绿色”、“红色”、“蓝色”、“黄色”]；
const btn=document.getElementById（'btn'）；
const color=document.querySelector（'.color'）；
btn.addEventListener（'click'，function（）{
让random=colors[~~（Math.random（）*colors.length）]；
document.body.style.backgroundColor=随机；
color.textContent=随机；
});
按钮{
位置：绝对位置；
最高：50%；
左：50%；
}
身体{
背景色：红色；
}

单击我
HTML中没有选择器类为.color
的元素，因此color.textContent
将返回null
您没有从数组中解析随机值的代码。您只需调用数组的第三个索引valueconst randomNumber=2这将始终为您提供蓝色，因为它是第三个值0=>绿色，1=>红色，2=>蓝色

以下应该是您正在寻找的内容

const colors=[“绿色”、“红色”、“蓝色”、“黄色”]；
const btn=document.getElementById（'btn'）；
const color=document.querySelector（'.color'）；
btn.addEventListener（'click'，function（）{
让随机=颜色[~~（Math.random(
<head>
    <title>Change Background Color</title>
    <script src="first.js"></script>
    <link rel="stylesheet" href="stuff.css">
</head>
<body>
    <button class="btn" id="btn">Click Me</button>
</body>

    const colors = ["green", "red", "blue", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');

btn.addEventListener('click', function(){
    const randomNumber = 2;
    document.body.style.backgroundColor = colors[randomNumber];
    color.textContent = colors[randomNumber];
}
);

    button{
    position: absolute;
    top: 50%;
    left: 50%;
}
body{
    background-color: red;
}