单击我的按钮重新加载另一个句子

Question

I am working on this little project, but I am stuck. I want my program to load a sentence or word every time I push on a button. I got it working once, but when I push my button again it does not reload a new word.

I tried to work with the page reloading, but that also does not work.

Can anyone help me so that when I push the button it automatically generates a new random word from my list? Keep in mind that I am very new to HTML, JavaScript and CSS.

 function myFunction() { document.getElementById("demo").innerHTML = randomSong; } var song = Array("song1", "song2", "song3", "song4", "song5", "song6"); var randomSong = song[Math.floor(Math.random() * song.length)];

 <button onclick="myFunction();">Moet er een atje worden gedaan? </button> <p id="demo"></p>

Answer 1

<button onclick="myFunction();">Moet er een atje worden gedaan?
</button>
<p id="demo"></p>
<script>  function myFunction() {
    var song = Array("song1", "song2", "song3", "song4", "song5", "song6");
    var randomSong = song[Math.floor(Math.random() * song.length)];
    document.getElementById("demo").innerHTML = randomSong;
  }  
</script>

If your randomSong variable should get a new value everytime you click the button, then it should be inside the function myFunction which executes on every click

EDIT: Also, moving the variable declarations outside the function will be more good, as we don't have to re-create the variables every time.

<script>
  var song = Array("song1", "song2", "song3", "song4", "song5", "song6");
  var randomSong;
  function myFunction() {

    randomSong = song[Math.floor(Math.random() * song.length)];
    document.getElementById("demo").innerHTML = randomSong;
  }  
</script>

EDIT2: Adding internal styles as per the request.

<style>
  button { //selects the element with element name directly
    padding: 20px;
  }
  #demo { // selects the element with id
    font-size: 35px;
    color: blue;
  }
</style>

put this in your code

Answer 2

<button onclick="myFunction();">Moet er een atje worden gedaan?</button>
<p id="demo"></p>
<script>
  var song = Array("song1", "song2", "song3", "song4", "song5", "song6");
  function myFunction() {
    document.getElementById("demo").innerHTML = song[Math.floor(Math.random() * song.length)];
  }  
</script>

Answer 3

Try this code.

 function myFunction() { var randomSong = song[Math.floor(Math.random() * song.length)]; console.log(randomSong); document.getElementById("demo").innerHTML = randomSong; } var song = Array("song1", "song2", "song3", "song4", "song5", "song6");

 <button onclick="myFunction();">Moet er een atje worden gedaan? </button> <p id="demo"></p>