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

Question

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

提前致谢！

Answer 1

这里很少有问题，我在上面的评论中列出了：

• paragraphsEl 是一个数组，您不能在数组上设置style.color，您需要遍历数组中的每个项目来设置该值
• style.color 将接受一个字符串值，您正在尝试调用一个名为 rgb 的函数，该函数不存在，请传入一个字符串以使其工作
• 通过 `Math.floor(Math.random() * 255) 使用 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 链接，我犯了几个错误，因为我没有测试它：

https://codepen.io/anon/pen/PdmKVd