創建元素是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在您的代碼的開頭是不正確的。