把取值存在数组中，用for循环往元素的innerHTML塞失败了，求热心的朋友帮我看下，非常感谢

这是想要实现的图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度音乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        i {
            text-decoration: none;
            font-weight: normal;
        }
        .music {
            width: 310px;
            margin: 50px auto;
            border: 1px solid #000;
        }
        .music li {
            height: 30px;
            line-height: 30px;
        }
        .music i ,
        .music span ,
        .music input {
            float: left;
        }
        .music input {
            height: 14px;
            width: 14px;
            margin: 8px 15px;
        }
        .music i {
            width: 160px;
            height: 30px;
        }
    </style>
    <script>
        window.onload = function () {
            var oUl = document.getElementById("music");
            var arrLi = oUl.getElementsByTagName("li");
            var oSpan = oUl.getElementsByTagName("span")[0];
            var oI = oUl.getElementsByTagName("i")[0];
            var arrCol = ["#F7FFFF","#fff"];
            var arrName = ["私奔","北京北京","我爱你中国","花火","回来","爱要有你才完美"];
            var arrSinger = ["梁博","梁博,黄勇","梁博","梁博","梁博","梁博,那英"];
            var len = arrName.length;
            var str = "";

            for(var i=0;i<len;i++){
                str  += '<li><input type="checkbox"><i></i><span></span></li>';
            }
            oUl.innerHTML = str;
            for(var i=0;i<len;i++){
                arrLi[i].style.backgroundColor = arrCol[i%arrCol.length];
            }
            for(var i=0;i<len;i++) {
                oI.innerHTML = arrName[i];
                oSpan.innerHTML = arrSinger[i];
            }
        }
    </script>
</head>
<body>
    <ul id="music" class="music">
    </ul>
</body>
</html>

window.onload = function () {
    var oUl = document.getElementById("music");
    var arrLi = oUl.getElementsByTagName("li");
    var oSpan = oUl.getElementsByTagName("span");
    var oI= oUl.getElementsByTagName('i');
    var arrCol = ["#F7FFFF","#fff"];
    var arrName = ["私奔","北京北京","我爱你中国","花火","回来","爱要有你才完美"];
    var arrSinger = ["梁博","梁博,黄勇","梁博","梁博","梁博","梁博,那英"];
    var len = arrName.length;
    var str = "";

    for(var i = 0; i < len; i++){
        str  += '<li><input type="checkbox"><i></i><span></span></li>';
    }
    oUl.innerHTML = str;
    for(var i = 0; i < len; i++){
        arrLi[i].style.backgroundColor = arrCol[i%arrCol.length];
    }
    for(var i = 0; i < len; i++) {
        oI[i].innerHTML = arrName[i];
        oSpan[i].innerHTML = arrSinger[i];
    }
}

这个是拿题主写的代码改正之后可以实现功能的。。

主要要注意的地方就是oUl.getElementsByTagName("span")[0]选中的是oUl中的第一个span标签，所以明显是不符合题主需求的，oUl.getElementsByTagName("span")是选中oUl中所有的span标签，然后再在循环中依次给span标签赋值即可。。其余同理。。

oSpan和oI应该是数组，不该是单个元素。

修改了四行代码，注释标明了。

window.onload = function () {
            var oUl = document.getElementById("music");
            var arrLi = oUl.getElementsByTagName("li");
            var oSpan = oUl.getElementsByTagName("span"); // delete [0]
            var oI = oUl.getElementsByTagName("i");  // delete [0]
            var arrCol = ["#F7FFFF","#fff"];
            var arrName = ["私奔","北京北京","我爱你中国","花火","回来","爱要有你才完美"];
            var arrSinger = ["梁博","梁博,黄勇","梁博","梁博","梁博","梁博,那英"];
            var len = arrName.length;
            var str = "";

            for(var i=0;i<len;i++){
                str  += '<li><input type="checkbox"><i></i><span></span></li>';
            }
            oUl.innerHTML = str;
            for(var i=0;i<len;i++){
                arrLi[i].style.backgroundColor = arrCol[i%arrCol.length];
            }
            for(var i=0;i<len;i++) {
                oI[i].innerHTML = arrName[i]; // change oI -> oI[i]
                oSpan[i].innerHTML = arrSinger[i]; // change oSpan -> oSpan[i]
            }
        }

【热门文章】