使用DOM事件更改html元素属性的Javascript按钮

我试图创建一个按钮，每当用户单击该按钮时，该按钮就会将段落元素的颜色更改为随机颜色。它似乎不起作用，我的文本编辑器（括号）告诉我我犯了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);

var button1El=document.getElementById（“button1”）；
var paragraphsEl=document.getElementsByTagName（“p”）；
var colorChange=函数（）{
var r=Math.floor（Math.random（）*255）；
var g=Math.floor（Math.random（）*255）；
var b=Math.floor（Math.random（）*255）；
对于（变量i=0；i

---

提前谢谢

我在上面的评论中列举了一些错误：

• paragraphsEl

  是一个数组，您不能设置

  样式。颜色

  在数组中，您需要迭代数组中的每个项来设置该值

• style.color

  将接受一个字符串值，如果您试图调用一个名为

  rgb

  的函数，但该函数不存在，请传入一个字符串以使其生效
• 在RGB中使用带有'Math.floor（Math.random（）*255）的整数

很接近，但你似乎忘记了一些事情是如何运作的

请记住，将问题分解成若干部分，并找出在某些地方使用的数据类型将有助于避免这些问题

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);

var button1El=document.getElementById（“button1”）；
var paragraphsElements=document.getElementsByTagName（“p”）；
var colorChange=函数（）{
var r=Math.floor（Math.random（）*255）；
var g=Math.floor（Math.random（）*255）；
var b=Math.floor（Math.random（）*255）；
对于（变量i=0；i

这里有一个代码笔链接，演示了如何使用代码，我犯了几个错误，因为我没有测试它：

---

“我的文本编辑器（括号）告诉我我犯了12个错误，但我没有真正看到它”它到底在告诉你什么？我的猜测是它与paragraphsEl有关。style.color

paragraphsEl

将是一个数组，数组没有样式。未定义数组doInside ESlint:document中的元素。g已经定义。未定义rgb。未定义b。在JSlint内部：缺少“use strict”。g已经定义。在定义之前使用rgb。您应该只将整数放入

rgb（…）

。除了执行

Math.random（）*255

do

Math.floor（Math.random（）*255）

之外，您还尝试在元素数组上设置

style.color

。您需要迭代数组，并分别对每个数组设置

style.color

。另外，将

style.color

设置为字符串，JS将其作为函数进行解析，因此它正在寻找一个名为

rgb

的函数，但该函数并不存在。感谢您指出这些。我发现我声明了两次g，我修正了它。我试过你的代码，但现在它给了我15个问题。我是不是用错误的方式链接了javascript？它一直告诉我文档未定义。您缺少

src

属性：

的引号，不用担心。学习使用Chrome的调试工具：您将节省大量的时间和精力！你推荐什么编辑？方括号不断告诉我不存在的问题。