单击paragraphs.My代码的随机背景颜色会产生错误
我正在做一个家庭作业练习，就是通过点击它们来随机地给我的段落涂上颜色。问题是，当我尝试我的代码时，我收到了一个“无法读取属性‘样式’的未定义的错误。我试图打破我的头，但我真的不明白我做错了什么。你能帮我吗？”
提前谢谢。
<!DOCTYPE>
<html>
<head>
<meta charset=utf-8/>
</head>
<body>
<section>
<p>Mussum Ipsum, cacilds vidis litro abertis. Cevadis im ampola pa arma uma pindureta. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Sapien in monti palavris qui num significa nadis i pareci latim.</p>
<p>A ordem dos tratores não altera o pão duris. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.</p>
<p>Leite de capivaris, leite de mula manquis sem cabeça. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Não sou faixa preta cumpadi, sou preto inteiris, inteiris.</p>
</section>
<script>
(function(){
'use strict'
var $ps = document.querySelectorAll('p');
for(var i = 0; i<$ps.length;i++){
$ps[i].addEventListener('click', function(){
$ps[i].style.backgroundColor = color;
});
}
function colors(){
var r = Math.floor((Math.random() * 256));
var g = Math.floor((Math.random() * 256));
var b = Math.floor((Math.random() * 256));
var color = 'rgb'+'('+r+','+g+','+b+')';
}
})();
</script>
</body>
</html>
回答 5
Stack Overflow用户
发布于 2019-03-25 15:24:38
您已经在事件侦听器函数中使用了$ps[i]。但是i的值在循环的每一次迭代之后都会更新。在循环的末尾，i的值等于段落总数的值。段落的索引从0开始。因此，有(第-1段的总数)段落。这就是为什么，当它试图访问$ps[i]时，它会导致错误！
您可以在事件侦听器函数中使用this关键字而不是$ps[i]来修复这个问题。这里，this关键字指示插入事件侦听器的元素。
您只在事件侦听器函数中使用了color。但是颜色是colors()函数中的一个局部变量。无法访问函数外部的局部变量。所以你必须使用colors()。此外，您还需要在colors()函数的末尾返回颜色。
for(var i = 0; i<$ps.length;i++){
$ps[i].addEventListener('click', function(){
this.style.backgroundColor = colors();
});
}
function colors(){
var r = Math.floor((Math.random() * 256));
var g = Math.floor((Math.random() * 256));
var b = Math.floor((Math.random() * 256));
var color = 'rgb'+'('+r+','+g+','+b+')';
return color;
} Stack Overflow用户
发布于 2019-03-25 15:03:22
在单击侦听器函数中，您的元素可以通过"this“访问。
否则，就不会调用着色函数，因为您忘记了"()“，并在函数中返回结果。上面的片段会有用的。这就是你想要的吗？
<!DOCTYPE>
<html>
<head>
<meta charset=utf-8/>
</head>
<body>
<section>
<p>Mussum Ipsum, cacilds vidis litro abertis. Cevadis im ampola pa arma uma pindureta. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Sapien in monti palavris qui num significa nadis i pareci latim.</p>
<p>A ordem dos tratores não altera o pão duris. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.</p>
<p>Leite de capivaris, leite de mula manquis sem cabeça. Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Não sou faixa preta cumpadi, sou preto inteiris, inteiris.</p>
</section>
<script>
(function(){
'use strict'
var $ps = document.querySelectorAll('p');
for(var i = 0; i<$ps.length;i++){
$ps[i].addEventListener('click', function(){
this.style.backgroundColor = colors();
});
}
function colors(){
var r = Math.floor((Math.random() * 256));
var g = Math.floor((Math.random() * 256));
var b = Math.floor((Math.random() * 256));
return 'rgb'+'('+r+','+g+','+b+')';
}
})();
</script>
</body>
</html>
Stack Overflow用户
发布于 2019-03-25 15:04:06
这是一个在循环中如何对待var的问题--也就是说，每次调用'click‘监听器时，都会再次检查i变量--而当循环已经完成时，它正是您的HTML数组的长度。您可以通过将事件侦听器的内部更改为简单的console.log(i)来检查它。它每一次打印3次。怎么修呢？例如，您可以从传递给您的函数的事件中获取单击元素的信息：
var $ps = document.querySelectorAll('p');
function changeBackgroundColor(e){
e.target.style.backgroundColor = colors();
}
for(var i = 0; i<$ps.length;i++){
$ps[i].addEventListener('click', changeBackgroundColor);
}
function colors(){
var r = Math.floor((Math.random() * 256));
var g = Math.floor((Math.random() * 256));
var b = Math.floor((Math.random() * 256));
return 'rgb'+'('+r+','+g+','+b+')';
}还请注意，您的var color = (...)不会在函数的范围之外被看到。您需要实际返回它并读取返回的值。
https://stackoverflow.com/questions/55340627
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号