创建元素是undefined

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); 
    } 

我通过button更换span，这样就可以更容易明白是怎么回事。当你点击一个按钮时，它会显示被点击的按钮的ID。当然，这段代码并不是你想要的，但是代码结构应该可以帮到你。

此外，insertAfter在您的代码的开头是不正确的。