onresize事件侦听器更改html正文的颜色

Question

我必须使用事件侦听器在调整窗口大小时将主体更改为随机颜色。 我目前所拥有的不会改变颜色。 我没有收到任何控制台错误，所以我不确定是什么问题。 给了我函数生成随机颜色。

的HTML

<body id="body11">
    <div>
        <p>requirement 11</p>
    </div>
</body>

Java脚本

<head>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            window.addEventListener("onresize", bodyColor)
            function bodyColor(){
                document.getElementById("body11").style.backgroundColor =
                '#'+Math.floor(Math.random()*16777215).toString(16);
            }
        }); 
    </script>
</head>

在这里，我以为我的代码在说...。

向文档添加一个事件侦听器，该对象将在DOMContentLoaded上调用该函数以向窗口添加一个事件侦听器，以便在调整大小时将调用该函数将主体的背景颜色更改为随机颜色。

我还尝试将脚本放在正文的底部，并取消了DOMContentLoaded方面，但是结果还是一样。

我没有控制台错误，我必须使用事件监听器，因为这是出于作业目的。

我哪里做错了？

Answer 1

您应该在监听一个名为“ resize”的事件，而不是“ onresize”的事件。

您未获得任何控制台输出的原因是事件本身未触发。

这个 -

window.addEventListener("resize", function(e){
  // your body color change code
});

应该管用

Answer 2

我很确定我在你的课堂上！ 通过删去代码的第一部分，我为我做了一些简单的事情：

函数colorMe（）{

        window.addEventListener("resize", function(){
            document.getElementById("body11").style.backgroundColor =
            '#'+Math.floor(Math.random()*16777215).toString(16);
        });
    }

希望有帮助！

Answer 3

看来我也在上课。 我做了以下更简单的代码，但它仅在脚本位于HTML文档而不是外部js文件中时才有效：

    <script>window.addEventListener("resize", function(){
            document.getElementById("body11").style.backgroundColor =
            '#'+Math.floor(Math.random()*16777215).toString(16);

}）;

附注：作为这里这些同学的一个补充说明，您如何编写要求1的代码-我的代码可在多种浏览器中使用，但在Firefox中完全没有显示！

onresize事件侦听器更改html正文的颜色

问题描述

3 个解决方案

解决方案1
0 已采纳 2015-09-19 16:52:25

解决方案2
0 2015-09-19 19:53:06

解决方案3
0 2015-09-19 20:30:27

onresize事件侦听器更改html正文的颜色

问题描述

3 个解决方案

解决方案1 0 已采纳 2015-09-19 16:52:25

解决方案2 0 2015-09-19 19:53:06

解决方案3 0 2015-09-19 20:30:27

解决方案1
0 已采纳 2015-09-19 16:52:25

解决方案2
0 2015-09-19 19:53:06

解决方案3
0 2015-09-19 20:30:27