如何在HTML中加载JavaScript onclick？

Question

This question is pertaining to my music discovery tool that I have created. DREAMFM

Within a div element, I have a JavaScript that randomly selects some HTML from an array. The randomly selected HTML is then written to my document, the index. Each number in the array is a different song that is written to the HTML. The only way to get to the next new song, is to refresh the page currently. I would like to load the JavaScript onclick of a button instead of having to reload the page to get to the next song.

Currently I am using this method to reload the external JavaScript:

<button id="nextbtn" type="button" onclick="shuffle()" autofocus>></button>

<script>
function shuffle() {
location.reload(true); 
}
</script>

I would like to load only the JavaScript without reloading the entire page.

Answer 1

Do not write your code / Do not implement your JS file inline with html. Wrap your code inside a function and call it as you need. Onload or Onclick:

function displayRandomSong(){
// put all of Your current code here if there is no function and
// every thing is pure javascript codes. I think this meets your need.

// However if your JS file is a complex of many functions, There is always 
// a function Which is triggered before others. Call that function here
// For example:
// startRandomization()
 }

So the html would be this:

<a onclick="displayRandomSong()">inline refresh</a>