Meng__TaiTai
Yoniro、JK
采纳率100%
2020-04-19 22:31

关于javascript Dom操作 for循环只循环一次的问题?

期望效果:页面中random box按钮可以控制div盒子的背景色彩;
html结构代码如下

<div class='father'>
        123
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div> 

    </div>
    <nav>
    <button id="bodycolor">random body</button>
    <button id="boxcolor">random box</button>
    </nav>

js代码如下

//随机16进制颜色的函数
    function randomColor(){
        var colorList= ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
        var colorStr='#';
        for(i=0;i < 6;i++){
            var index=parseInt(Math.random()*16);
            colorStr+=colorList[index];
        }//end for
        return colorStr;
    }//end function 

//随机div背景颜色
    document.getElementById("boxcolor").onclick=function(){ 
        //获取页面中所有div对象,组成数组box
        var box=document.getElementsByTagName("div");
        //循环遍历box数组
        for(i=0;i < 5;i++){ 
            //改变div背景颜色
            box[i].style.backgroundColor=randomColor();
            console.log(box[i]);
        }//end for  
        //控制台输出box中的内容
        console.log(box);
    }//end function

实际效果:点击按钮只能够随机父级div的背景颜色,子级div无效果
分析:在控制台中可以看出box中获取了页面中所有的div对象,而for 循环中只输出了一次box数组中的元素,如下图:

图片说明

所以不明白问题出在哪里,请大牛们解答!
感谢!
本案例全部代码附在下方

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>随机背景颜色</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            position: relative;
             overflow: hidden;
        }
        button{
            width: 100px;
            height: 200px;
            font-weight: 700;
            border: 2px solid #fff;
            background-color: #ccc;
            color: #666;
            outline: none;
            position: absolute;
        }
        nav button:first-child{
            top:0px;
            left: 170px;    
            border-bottom: 1px solid #fff;
        }
        nav button:last-child{
            top: 200px;
            left: 170px;    
            border-top: 1px solid #fff; 
        }
        button:hover{
            cursor: pointer;
            background-color: #666;
            color: #fff;

        }
        .father{
            margin: auto;
            margin-top: 20px;
            width: 900px;
            height: 400px;
            border: 2px solid #fff;
            border-left: 0;
        }
        .son{   
            margin: 0;
            width: 100px;
            height: 100px;
            border: 0;
            float: left;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class='father'>
        123
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div> 

    </div>
    <nav>
    <button id="bodycolor">random body</button>
    <button id="boxcolor">random box</button>
    </nav>
<script>
    /*随机16进制颜色的函数*/
    function randomColor(){
        var colorList= ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
        var colorStr='#';
        for(i=0;i < 6;i++){
            var index=parseInt(Math.random()*16);
            colorStr+=colorList[index];
        }//end for
        return colorStr;
    }//end function 

    /*随机rgba格式颜色的函数*/
    function randomColorRgba(){
        var colorStr='rgba(';
        for(i=0;i<3;i++){
            colorStr+=(parseInt(Math.random()*(255+1))+', ');
        }//end for
        colorStr+=(Math.random()+')');
        return colorStr;
    }

    //随机body背景颜色
    var bd=document.getElementsByTagName("body");
    bd[0].style.backgroundColor=randomColor();
    document.getElementById("bodycolor").onclick=function(){
        bd[0].style.backgroundColor=randomColor();
    }


    //随机div背景颜色
    document.getElementById("boxcolor").onclick=function(){ 
        var box=document.getElementsByTagName("div");//获取页面中所有div对象,组成数组box
        for(i=0;i < 5;i++){                 //循环遍历box数组,
            box[i].style.backgroundColor=randomColor();//改变div背景颜色
            console.log(box[i]);   //问题是:在页面中只能给box中第一个对象加上背景颜色,其他对象不行
        }//end for  
        console.log(box);
    }//end function

</script>
</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • weixin_43737036 灵动领域 1年前

    将方法里面的计数由i变成j即可
    //随机div背景颜色
    document.getElementById("boxcolor").onclick=function(){
    var box=document.getElementsByTagName("div");//获取页面中所有div对象,组成数组box
    for(j=0;j < 5;j++){ //循环遍历box数组,
    box[j].style.backgroundColor=randomColor();//改变div背景颜色
    console.log(box[j]); //问题是:在页面中只能给box中第一个对象加上背景颜色,其他对象不行
    }//end for

    console.log(box);
    }//end function

    点赞 1 评论 复制链接分享

为你推荐