将 innerHTML 从一个元素复制到另一个元素

Question

我是个新手。我一直在用 HTML、CSS 和 Javascript 编写一个自定义音频播放器，它只包含一个 play/pause 切换按钮和歌曲标题。如果将鼠标悬停在歌曲标题上，它会显示一个包含其他歌曲标题的下拉菜单。由于下拉是一个带有列表项的简单无序列表，我想知道如何将音频播放器的歌曲标题 space 的 innerHTML 设置为列表项的 innerHTML被点击了。

HTML 
<li class="dropdownList" onclick="run">Track 1</li>
<li class="dropdownList" onclick="run">Track 2</li>
<li class="dropdownList" onclick="run">Track 3</li>

JS
var songtitle = document.getElementById('songtitle');
var dropdownList = document.getElementsByClassName('dropdownList');
function run() {
    songtitle.innerHTML = dropdownList(i).innerHTML;
}

我也试过消除 HTML 函数调用并使用纯 JS

dropdownList[i].addEventListener("click", run)

这里有更多详细信息...

        <div id="div-player">
            <button id="pButton" class="play" onclick="playPause()"></button>
            <ul>
                <li>
                    <a href="#" id="songtitle">fill innerhtml with song title</a>
                    <ul>
                        <li class="dropdownList" onclick="run()">Track 1</li>
                        <li class="dropdownList" onclick="run()">Track 2</li>
                        <li class="dropdownList" onclick="run()">Track 3</li>
                    </ul>
                </li>
            </ul>
        </div>

JS

var audioElement = document.getElementById("audioElement");
var pButton = document.getElementById('pButton');
var songtitle = document.getElementById('songtitle');
var dropdownList = document.getElementsByClassName('dropdownList');
var i=1;

function playPause() {
    if (audioElement.paused) {
        pButton.className = "";
        pButton.className = "pause";
        if (i == 6) i = 1;
        var nextTrack = "music/track"+i+".mp3";
        var getTime = audioElement.currentTime; 
        audioElement.src = nextTrack; //currentTime resets after this statement
        audioElement.onloadedmetadata = function(){ 
            audioElement.currentTime = getTime; 
            audioElement.play();
        }
        i++;
        audioElement.addEventListener('ended', playPause);
    } else {
        pButton.className = "";
        pButton.className = "play"; 
        i--;
        audioElement.pause();
    }
}

function run() {
    //stop or pause the audio
    songtitle.innerHTML = dropdownList(i).innerHTML;
    //start the playPause function again, setting i equal to the list item number that was clicked on (for example "1" or "2" or "3")
}

Answer 1

你最好提供工作示例，因为你这里的示例看起来很不完整。例如'i'从哪里来？

但在你的例子中我会改变

function run() {
    songtitle.innerHTML = dropdownList[i].innerHTML;
}

Answer 2

试试这个

var songtitle = document.getElementById('songtitle');
var dropdownList = document.getElementsByClassName('dropdownList');
function run(event) {
    songtitle.innerHTML =event.target.innerHTML;

  //console.log(event.target.innerHTML);
}
//console.log(dropdownList);

for(var i=0;i<dropdownList.length;i++){
  dropdownList[i].addEventListener("click", run);
}

https://jsbin.com/

将 innerHTML 从一个元素复制到另一个元素

copy innerHTML from one element to another

javascript

audio

innerhtml