在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 在setInterval中操作DOM修改backgroundcolor出錯(cuò)

在setInterval中操作DOM修改backgroundcolor出錯(cuò)

我正在嘗試用JS實(shí)現(xiàn)下圖所示效果。在setInterval的函數(shù)頂部我試圖訪問并修改class中div的background-color屬性,此時(shí)發(fā)生錯(cuò)誤。
1,在我添加document.getElementsByClassName("div").style.enableBackground = "darkorange";之前setInterval中函數(shù)運(yùn)行正常。
2,我嘗試通過chrome來尋找bug,但只能看到右上角的error數(shù)隨setInterval循環(huán)增加。如何才能看到error具體位置?
3,我通過.sort方法來實(shí)現(xiàn)數(shù)組的隨機(jī)排序,并以此實(shí)現(xiàn)隨機(jī)選取三個(gè)div元素的效果。但實(shí)際運(yùn)行過程中似乎不是完全隨機(jī),請(qǐng)問這個(gè)方法是否正確?

圖片描述

<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>
回答
編輯回答
脾氣硬

首先文中有語(yǔ)法錯(cuò)誤.enableBackground。感謝dablwow80的評(píng)論。
此外getElementsByClassName()所返回的是一個(gè)數(shù)組,需要循環(huán)修改backgroundColor

2018年5月18日 14:59