將innerHTML從一個元素複製到另一個元素

我非常喜歡新手。我一直在用HTML，CSS和Javascript編寫自定義音頻播放器，它只包含播放/暫停切換按鈕和歌曲標題。如果您將鼠標懸停在歌曲標題上，則會顯示包含其他歌曲標題的下拉菜單。由於下拉菜單是一個簡單的無序列表項，我想知道如何將音頻播放器的歌曲標題空間的innerHTML設置爲點擊列表項的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>

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

來源

2016-04-20 A.C.

http://stackoverflow.com/questions/3545341/jquery-get-the-id -li-after-click-click-function可能會有幫助，但是，問題和接受的答案使用jquery而不是純粹的javascript – scoots

試試這個

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

來源

2016-04-20 05:41:28

這很好。謝謝。既然你已經包含了一個「addEventListener」，我不需要調用HTML列表項元素中的函數，對嗎？另外，有沒有辦法在「dropdownList [i]裏面檢索」i「的確切值？我需要這個值才能使用新的」i「值再次啓動」playPause「函數。 –

yes，you can使用像這樣的功能run（i）{ songtitle.innerHTML = dropdownList [i] .innerHTML; }; var i = 0; run（i）;你可以在這裏查看https://jsbin.com/sehafi/edit ？HTML，JS，輸出 –

你最好提供一個工作的例子，因爲你的這裏的例子看起來不完整。例如，'我'來自哪裏？

但在你的例子，我會改變

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

來源

2016-04-20 05:35:21

「我」是我試圖識別確切的列表項目是c舔。但是，我會包括更多的細節... –

將innerHTML從一個元素複製到另一個元素

回答

相關問題