Estoy tratando de hacer un programa que muestre aleatoriamente uno de los cuatro emojis definidos dados en una matriz cuando se hace clic en el botón y cambia cada dos segundos y continúa haciéndolo hasta que se hace clic en el botón de detener. Tenga en cuenta que aún no he terminado la función de parada, ya que no puedo entender por qué mi función randomEmoji no muestra nada. Gracias por adelantado :).
var display = document.getElementById("emojiDisplay"); var emojiList = ["🥳", "🤩", "👾", "😵"]; function randomEmoji() { emojiDisplay.innerHTML = emojiList[Math.floor(Math.random() * emojiList.length)]; setInterval(function() { document.getElementById("emojiDiplay").innerHTML = emojiList[i++]; if (i == emojiList.length) i = 0; }, 2000); } function stop() { } <button onclick=randomEmoji()>Display random emoji</button> <button onclick=stop()>Stop</button> </br> </br> <div id="emojiDisplay"> </div>Basado en su idea y su código, lo actualicé y lo dejé funcionar (la función de stop también funciona). Puede consultar la siguiente demostración:
var display = document.getElementById("emojiDisplay"); var emojiList = [ "🥳", "🤩", "👾", "😵" ]; var i = 0; var timer; function randomEmoji() { clearInterval(timer); // Call show Emoji to let it shows instanly. showEmoji(); // Put showEmoji function to let it repeats timer = setInterval(function() { showEmoji(); }, 2000); } function showEmoji() { i = Math.floor(Math.random() * emojiList.length); emojiDisplay.innerHTML = emojiList[i]; } function stop() { // clear interval timer to let it stops clearInterval(timer); } <!DOCTYPE html> <html> <head> <title>EmojiRandomiser</title> </head> <body> <button onclick=randomEmoji()>Display random emoji</button> <button onclick=stop()>Stop</button> <br> <br> <div id="emojiDisplay"> </div> </body> </html>