CODEWITHSUNDEEP
javascriptaudioinnerhtml
A.C.
A.C.

Reputation: 15

copy innerHTML from one element to another

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

Upvotes: 0

Views: 4093

Answers (2)

B.P
B.P

Reputation: 171

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/

Upvotes: 0

or hor
or hor

Reputation: 723

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

Upvotes: 0

Related Questions