Как бы я использовал JavaScript, чтобы кнопка сброса действительно работала?

Question

Рассмотрим следующий код:

  var animalSound = document.getElementById("animalSound");

Кнопка сброса:

   var resetButton = document.querySelector("#reset");

Функция моей консоли сообщает, что значение равно null:

 resetButton.addEventListener("click", function(){
   alert(" clicked button");
 })

Животные, которых он выбирает:

 var animals = ["elephant", "dog", "monkey", "zebra", 
           "parakeet", "cat", "pig", "Guerilla", 
           "skunk", "Leapord" ]


 var x = animals[Math.floor(Math.random()*animals.length)];
 animalSound.textContent =  x;

Answer 1

Я бы поместил код для выбора случайного животного в функцию и вызвал бы его по клику:

var resetButton = document.querySelector("#reset");

resetButton.addEventListener("click", function(){
  setNewAnimal()
});

// the animals it picks from
 var animals = ["elephant", "dog", "monkey", "zebra", 
           "parakeet", "cat", "pig", "gorilla", 
           "skunk", "leopard" ];

// set random animal
function setNewAnimal() {
   var animalSound = document.getElementById("animalSound");
   var x = animals[Math.floor(Math.random()*animals.length)];
   animalSound.textContent =  x;
 }
 
 setNewAnimal();

<div id="animalSound"></div>
<button id="reset">Reset</button>