copy innerHTML from one element to another

Question

I'm very much a newbie. I've been coding a custom audio player with HTML, CSS, and Javascript, which consists of only a play/pause toggle button and the song title. If you hover over the song title, it reveals a drop down menu with other song titles. Since the drop down is a simple unordered list with list items, I'm wondering how to set the innerHTML of the audio player's song title space to the innerHTML of the list item that was clicked on.

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

I've also tried eliminating the HTML function call and with pure JS

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

Here is more detail...

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

http://stackoverflow.com/questions/3545341/jquery-get-the-id-value-of-li-after-click-function might be helpful, however, the question and accepted answer use jquery and not pure javascript — brs, Apr 20 '16 at 05:30

score 0 · Answer 1 · answered Apr 20 '16 at 05:35

0

you better provide working example, because your example here looks rather incomplete. For example where does 'i' come from?

but in your example I would change

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

answered Apr 20 '16 at 05:35

or hor

723
3
11

"i" is my poor attempt at trying to identify the exact list item that was clicked. But yes I will include more detail... – A.C. Apr 20 '16 at 05:42

score 0 · Accepted Answer · answered Apr 20 '16 at 05:41

0

try this

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/

answered Apr 20 '16 at 05:41

B.P

171
7

That worked great. Thanks. Since you've included an "addEventListener", I will not need to call the function in the HTML list item element, correct? Also, is there a way to retrieve the exact value of "i" inside of "dropdownList[i]? I need that value in order to start the "playPause" function again using the new "i" value. – A.C. Apr 20 '16 at 06:14
yes, you can use like this function run(i) { songtitle.innerHTML =dropdownList[i].innerHTML; } ; var i=0; run(i); you can check here https://jsbin.com/sehafi/edit?html,js,output – B.P Apr 20 '16 at 09:14

copy innerHTML from one element to another

2 Answers2