我正在做一个作业练习，即通过单击它们为段落的背景随机涂上颜色。问题是，当我尝试代码时，收到一个未捕获的错误“无法读取未定义的属性'style'。我试图打断头，但我真的不明白自己在做什么错。您能帮我吗？< / p>
谢谢。
<!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>
答案 0 :(得分：1)
您已在事件监听器函数中使用$ps[i]。但是i的值在循环的每次迭代之后都会更新。在循环结束时，i的值等于段落总数的值。段落的索引从0开始。因此有（段落总数-1）个段落。这就是为什么在尝试访问$ps[i]时会导致错误！
您可以通过在事件监听器函数中使用this关键字而不是$ps[i]来解决此问题。这里的this关键字表示插入事件侦听器的元素。
您仅在事件监听器函数中使用了color。但是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;
}
答案 1 :(得分：0)
在点击侦听器功能中，您的元素可以通过“ 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>
答案 2 :(得分：0)
这是在循环内如何处理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 = (...)在函数范围之外不会被看到。您需要实际返回它并读取返回的值。
答案 3 :(得分：0)
几件事：
我不确定为什么要使用函数闭包来执行此操作，但这并不是真正的问题。
在不调用函数的情况下创建函数colors不会设置您拥有的var color，这意味着您无法使用它，因此我添加了一个返回值以获取新的颜色每次调用该函数。
最后一件事是$ps[i].style的问题：由于您使用了var i，因此事件监听器中使用的ps$[i]也不相同，即使从中调用，更改事件目标的样式。
<!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>
'use strict'
var $ps = document.querySelectorAll('p');
for(var i = 0; i<$ps.length; i++){
$ps[i].addEventListener('click', function(e){
e.target.style.backgroundColor = color();
});
}
function color(){
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>
答案 4 :(得分：0)
<!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>
document.addEventListener('click', ({target}) => {
if( target.tagName !== 'P' ) return;
const rand = () => Math.floor(Math.random() * 256);
target.style.background = "rgb(R,G,B)".replace(/R|G|B/g, rand);
});
</script>
</body>
</html>