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

【问题标题】：Code works how I want it to, but with an "Uncaught TypeError代码按我想要的方式工作，但出现“未捕获的类型错误”
【发布时间】：2020-09-02 10:01:17
【问题描述】：

我希望它能够发挥作用，当您单击“Make 'Em”按钮时产生不同颜色的点。但是，在查看控制台时，我注意到有一个 Uncaught 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>

【问题讨论】：

好奇第二个 for 循环是关于什么的...for (var x = 0; x >= 0 ; x++){ 大于 = 到零作为您的结束条件？
var x = 0; x >= 0 ; x++ .... 欢迎来到无穷大 - 所以一旦 x 大于或等于 document.getElementsByClassName('circs').length 你就会得到那个错误
我的想法是它将左侧和底部样式应用于使用“circs”类制作的任何其他 div。
想一想 .. x 从 0 开始，并在 x >= 0 时不断增加 ...因此，它会永远增加（或直到您的错误）
是的，也许我不需要等号部分...

标签： javascript typeerror

【解决方案1】：

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

类似这样的：

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

【讨论】：

【解决方案2】：

你是类，创建元素很好。你刚刚用这条线做了一个永无止境的循环

for (var x = 0; x >= 0 ; x++)

我已将其切换为使用下面的 forEach() 循环。我的首选方式。

function makeCircles(){
            for (var i = 0; i <= 10; i++){
                let circ = document.createElement('div');
                circ.className = "circs";
                document.body.appendChild(circ);
            }
            
            // convert the HTML collection to an Array
            var elements =[...document.getElementsByClassName('circs')]

            elements.forEach( (circle) => {
                circle.style.left = Math.floor(Math.random() * 1200)+"px";
                circle.style.bottom = Math.floor(Math.random() * 600)+"px";
                circle.style.backgroundColor = "#" + Math.floor(Math.random() * 999999);
            })   
        }

body {
            background-color: black;
        }

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <button onclick="makeCircles()">Make 'Em</button>
</body>
</html>

【讨论】：