javascript - 创建的元素未定义

Question

我正在尝试创建一个 html5 视频音量操作，并且想使用 javascript 将其插入到 DOM 中，但是当我使用 for 浏览元素时循环，它返回未定义。这是我的代码:

    // 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中时，它不是未定义。它返回元素的精确值。我想使用 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 不正确。