时间戳

首页 > 解决方案 > 代码按我想要的方式工作，但出现“未捕获的类型错误”

javascript - 代码按我想要的方式工作，但出现“未捕获的类型错误”

问题描述

我希望它能够发挥作用，当您单击“Make 'Em”按钮时产生不同颜色的点。但是，在查看控制台时，我注意到有一个未捕获的 TypeError。

我想我知道为什么会发生错误，这可能是因为第二个 for 循环中的 getElementsByClass() 函数没有看到第一个 for 循环生成的类，因为它们是事后生成的，但如果是这样的话，那它为什么会起作用呢？

<!DOCTYPE html>
<html>
<head>
    <title>CIRCLES</title>
    <style type="text/css">

        body {
            background-color: black;
        }

        .circs {
            width: 50px;
            height: 50px;
            background-color: #523674;
            border-radius: 50%;
            display: block;
            position: absolute;
        }

    </style>
</head>
<body>

    <script type="text/javascript">
        function makeCircles(){
            for (var i = 0; i <= 10; i++){
                let circ = document.createElement('div');
                circ.className = "circs";
                document.body.appendChild(circ);
            }

            for (var x = 0; x >= 0 ; x++){  
                document.getElementsByClassName('circs')[x].style.left = Math.floor(Math.random() * 1200)+"px";
                document.getElementsByClassName('circs')[x].style.bottom = Math.floor(Math.random() * 600)+"px";
                document.getElementsByClassName('circs')[x].style.backgroundColor = "#" + Math.floor(Math.random() * 999999);
            }   
        }
    </script>
    <button onclick="makeCircles()">Make 'Em</button>
</body>
</html>

标签： javascripttypeerror

解决方案

因为您应该在迭代之前验证元素是否存在。

像这样的东西：

    var circs = document.getElementsByClassName("circs");

    for (var x = 0; x < circs.length ; x++){  
       circs[x].style.left = Math.floor(Math.random() * 1200)+"px";
       circs[x].style.bottom = Math.floor(Math.random() * 600)+"px";
       circs[x].style.backgroundColor = "#" + Math.floor(Math.random() * 999999);
    }

推荐阅读