Question

我尝试创建html5视频卷操作，我想使用javascript将其插入DOM，但是当我使用for循环浏览元素时，它会返回undefined。这是我的代码：

    // Volume
    var volumeWrapper = document.createElement('span');
    volumeWrapper.className = "volumeWrapper";
    insertAfter(elapseTimeWrapper, volumeWrapper);

    for ( var i = 0; i <= 4; i ++ ) {
        var volumeControl = document.createElement('span');
        volumeWrapper.appendChild(volumeControl);
        (function(index) {
            volumeControl.onclick = function() {
                if ( this.className == "" ) {
                    this.className = "active";
                    for ( var j = 0; j <= index; j ++ ) {
                        console.log(volumeControl[j]) // return undefined
                    }
                } else {
                    this.className = "";
                }
            }
        })(i);
    }

我不知道这段代码有什么问题，当我直接将其插入html时，它不是undefined。它返回元素的确切值。我想用javascript而不是html插入它。我需要你的帮助。谢谢你的回复。

Answer 1

您的代码结构不正确。

这可能会对您有所帮助：

  var volumeControl = [];
  for ( var i = 0; i <= 4; i++ ) {
        volumeControl[i] = document.createElement('button');
        volumeControl[i].innerHTML = i;
        volumeControl[i].id = "b" + i;
        volumeWrapper.appendChild(volumeControl[i]);
        (function(index) {
            volumeControl[i].onclick = function() {
                if ( this.className == "" ) {
                    this.className = "active";
                    console.log(volumeControl[index].id); // return undefined
                } else {
                    this.className = "";
                }
            }
        })(i);
    }

我将span替换为button，以便您可以更轻松地了解正在发生的事情。单击按钮时，它会显示单击按钮的ID。当然，这段代码不是你想要的，但代码结构应该对你有帮助。

另外，代码开头的insertAfter不正确。

创建的元素未定义

1 个答案: