How do I display a given random array element every two seconds until it is stopped?

Question

I am trying to make a program that randomly displays one of four defined emojis given in an array when the button is clicked and switches every two seconds continues to do so until the stop button is clicked. Note that I have not finished the stop function yet as I cannot work out why my randomEmoji function is not displaying anything. Thanks in advance :).

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>

Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Use tools like [JSHint](//jshint.com/) to find problems with your code immediately. — Sebastian Simon, Sep 26 '21 at 11:01
Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Sep 26 '21 at 11:03
the tag `` does not exist. `
` is an empty tag that has no closing tag. Also `

` can be considered bad practise. a `bottom-margin` should be set instead. — tacoshy, Sep 26 '21 at 11:03
The interval is fired in the global scope, not in the click listener, also the `i` is not defined and it doesn’t iterate as it’s a variable inside the interval function. — RatajS, Sep 26 '21 at 11:04
Do you want to keep emotions show item by item based on the index after the first random? Or do you just want to keep it randomly all the time? — Tuan Dao, Sep 26 '21 at 11:17

score 2 · Accepted Answer · edited Sep 26 '21 at 11:25

2

Based on your idea and your code, I’ve updated it and let it work (the stop function works, too). You can check the below demo:

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>

edited Sep 26 '21 at 11:25

Sebastian Simon

18,263
7
55
75

answered Sep 26 '21 at 11:06

Tuan Dao

2,647
1
10
20

@SebastianSimon thanks for your suggestion. I will update it. – Tuan Dao Sep 26 '21 at 11:08
1

`emojiList[i++]; if (i == emojiList.length) i = 0;` from the OP implies that the _next_ emoji in the list should be shown in the interval, not another random emoji. – Sebastian Simon Sep 26 '21 at 11:11
@SebastianSimon Yes, maybe he wants that too. Maybe we should ask him because he just mentions about randomly in his description. Thanks for your reminder. – Tuan Dao Sep 26 '21 at 11:15
1

Thank you both for your help. Technically you are both right. after reviewing my code and integrating your suggestion I have seen that my code implies that only the next random should be shown as Sebastian stated. However, I am actually after another random emoji as @Tartarus has shown. – camelCase Sep 26 '21 at 11:23
1

@camelCase That's my pleasure to help you. Consider accepting this as an accepted answer if it suits you. – Tuan Dao Sep 26 '21 at 11:25

How do I display a given random array element every two seconds until it is stopped?

1 Answers1