![](/img/trans.png)
[英]Javascript - How to Remove DOM elements using click events and classes?
[英]Javascript button that changes properties of html elements using DOM Events
我正在尝试制作一个按钮,每当用户单击该按钮时,该按钮会将段落元素的颜色更改为随机颜色。 它似乎不起作用,我的文本编辑器(括号)告诉我我犯了 12 个错误,但我并没有真正看到它。 这是我在网页末尾写的:
<button id="button1">Color Changer</button>
</div>
</div>
</div>
<script type="text/javascript" src=script.js></script>
</body>
</html>
这是 script.js:
var button1El = document.getElementById("button1");
var paragraphsEl = document.getElementsByTagName("p");
var colorChange = function () {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
for (var i = 0; i < paragraphsEl.length; i += 1) {
paragraphsEl[i].style.color = rgb(r, g, b);
}
}
button1El.addEventListener("click", colorChange);
提前致谢!
这里有一些错误,我在上面的评论中列出了:
paragraphsEl
style.color
是一个数组,您不能在数组上设置style.color
,您需要遍历数组中的每个项目以设置该值style.color
将采用一个字符串值,您正在尝试调用一个名为rgb
的函数,该函数不存在,传入一个字符串以使其工作关闭,但您似乎忘记了一些事情是如何运作的。
请记住,将问题分解为多个部分并弄清楚某些地方正在使用哪些数据类型将帮助您避免许多此类问题。
var button1El = document.getElementById("button1");
var paragraphsElements = document.getElementsByTagName("p");
var colorChange = function () {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
for(var i = 0; i < paragraphsElements.length; i++) {
paragraphsElements[i].style.color = 'rgb(' + r + ', ' + g + ', ' + b + ')';
}
}
button1El.addEventListener("click", colorChange);
这是一个演示工作代码的 codepen 链接,我犯了几个错误,因为我没有测试它:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.