Question

我在设计音乐播放器时遇到了问题。我的音乐播放器使用以下代码：

playlist_index = 0;

// Set object references
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
volumeslider = document.getElementById("volumeslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
playlist_status = document.getElementById("playlist_status");
playerImg = document.getElementById("playerImg");

// Audio Object
audio = new Audio();
audio.src = dir+playlist[0].song_url;
audio.loop = false;
playlist_status.innerHTML = playlist[playlist_index].song_name + '-' + playlist[playlist_index].band_name;

// Add Event Handling
playbtn.addEventListener("click",playPause);
mutebtn.addEventListener("click", mute);
seekslider.addEventListener("mousedown", function(event){ seeking=true; seek(event); });
seekslider.addEventListener("mousemove", function(event){ seek(event); });
seekslider.addEventListener("mouseup",function(){ seeking=false; });
volumeslider.addEventListener("mousemove", setvolume);
audio.addEventListener("timeupdate", function(){ seektimeupdate(); });
audio.addEventListener("ended", function(){ switchTrack(); });
audio.addEventListener("play", function(){ playbtn.style.background = "url(http://localhost/wordpress/wp-content/themes/virtue-child/pause.png) no-repeat"; });

// Functions
function switchTrack(){
    if(playlist_index == (playlist.length - 1)){
        playlist_index = 0;
    } else {
        playlist_index++;   
    }
    playlist_status.innerHTML = playlist[playlist_index].song_name + '-' + playlist[playlist_index].band_name;
    audio.src = dir+playlist[playlist_index].song_url;

    setTimeout(audio.play(), 2000);     
}

（加上一些更新搜索栏和时间的函数）和以下HTML：

<div id="audio_player">
    <div id="playerImg"></div>
    <div id="audio_controls">
        <button id="playpausebtn"></button>
        <p id="playlist_status"></p>
        <div id="sliderHolder">
            <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
            <span id="curtimetext">00:00</span>
            <span id="durtimetext">00:00</span>
        </div>
        <button id="mutebtn"></button>
        <br/>
        <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
    </div>
</div>

但是当我在容器div中开始容纳元素时，上面的代码无法更新时间，并且搜索滑块不起作用。内置和风格的音频播放器HTML如下所示：

<div id="audio_player">
    <img src="wp-content/uploads/band-photos/Logo.png" id="playerImg">
    <p id="playlist_status"></p>
    <div id="audio_controls">
        <div id="sliderHolder">
            <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
            <span id="curtimetext">00:00</span>
            <span id="durtimetext">00:00</span>
        </div>
        <div id="musicButtons">
            <button id="playpausebtn"></button> 
            <div id="volumeHolder">
                <img src="http://localhost/wordpress/wp-content/themes/virtue-child/speaker.png" id="volButton">
                <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
            </div>
        </div>                  
    </div>
</div>

当我开始在div中存放元素并在DOM中搜索它们时，是否存在问题？同样，JavaScript使用第一组HTML，而不是第二组。

Answer 1

感谢大家的投入。看起来在设计新玩家时我删除了静音按钮。因此：＆＃39; mutebtn.addEventListener（＆＃34;点击＆＃34;，静音）;＆＃39;抛出错误并导致其余功能无法正常工作。

为什么嵌套我的div会破坏document.getElementById（）？

1 个答案: