在setInterval中操作DOM修改backgroundcolor出错

Question

在setInterval中操作DOM修改backgroundcolor出错

发布于
2018-02-02

新手上路，请多包涵

我正在尝试用JS实现下图所示效果。在setInterval的函数顶部我试图访问并修改class中div的background-color属性，此时发生错误。
1，在我添加document.getElementsByClassName("div").style.enableBackground = "darkorange";之前setInterval中函数运行正常。
2，我尝试通过chrome来寻找bug，但只能看到右上角的error数随setInterval循环增加。如何才能看到error具体位置？
3，我通过.sort方法来实现数组的随机排序，并以此实现随机选取三个div元素的效果。但实际运行过程中似乎不是完全随机，请问这个方法是否正确？

图片描述

<head>
    <title>JS task flashing s</title>
    <style>
        .div
        {
            padding: 13%;
            border-radius: 3%;
            margin: 1%;
            float: left;
            background-color: darkorange;
        }
        
        
        .main
        {
            width: 80%;
            padding-bottom: 90%;
            border-style:dashed;
        }
        button
        {
            width: 82%;
            padding: 3% 0% 3% 0%;
            margin: 1%;
            background-color: white;
            border-color: darkorange;
            color: darkorange;
        }
        button:hover{
            background-color: darkorange;
            color: white;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="div" id="div1"></div>
        <div class="div" id="div2"></div>
        <div class="div" id="div3"></div>
        <div class="div" id="div4"></div>
        <div class="div" id="div5"></div>
        <div class="div" id="div6"></div>
        <div class="div" id="div7"></div>
        <div class="div" id="div8"></div>
        <div class="div" id="div9"></div>
        <button id="start">Start flashing</button>
        <button id="stop">Stop</button>
    </div>
    

    
    <script>
        var intervalTrigger;
         document.getElementById("start").addEventListener("click",function(){            
            intervalTrigger = setInterval(function colorChange(){ 
               
                
            
            function getColor(){
                r=Math.floor(Math.random()*256);
                g=Math.floor(Math.random()*256);
                b=Math.floor(Math.random()*256);
                return "rgb("+r+","+g+","+b+")";
            }
            
            
        var getId = Array("div1","div2","div3","div4","div5","div6","div7","div8","div9");
                
        getId.sort(
            function(){
                return 0.5-Math.random()
            }
        )
               document.getElementsByClassName("div").style.enableBackground = "darkorange";//Reset blackground color
            document.getElementById(getId[0]).style.backgroundColor = getColor();
           document.getElementById(getId[1]).style.backgroundColor = getColor();
            document.getElementById(getId[2]).style.backgroundColor = getColor();
            

        } ,1000)}
       );
        document.getElementById("stop").addEventListener("click",function(){
            clearInterval(intervalTrigger);
        });
        
        
        
        
        
    </script>
</body>

javascript

阅读 1.4k

1 个回答

得票最新

Qingshan

31

发布于
2018-02-03

新手上路，请多包涵

首先文中有语法错误.enableBackground。感谢dablwow80的评论。
此外getElementsByClassName()所返回的是一个数组，需要循环修改backgroundColor

撰写回答