JavaScript querySelector works, but not querSelectorAll

[scriptnewbie]

I want to replace all .emoji elements, with a random weather emoji. I have written the following code to randomize an emoji:

let weatherEmojis = [
  "⚡️","☀️","⛅️","☁️","💧","💦","☔️","💨","❄️"
];

var weatherEmoji =
  weatherEmojis[Math.floor(Math.random() * weatherEmojis.length)];

And the following to insert a random emoji into my page:
let currentEmoji = document.querySelector(".emoji"); currentEmoji.innerHTML = weatherEmoji;

This works, but only with the first .emoji element.
When cahnging it to ,
let currentEmoji = document.querySelectorAll(".emoji"); currentEmoji.innerHTML = weatherEmoji;
nothing works.

How do I replace all .emoji elements?

Any help is appreciated!

 

[menator01]

Are you wanting to display only one randomized icon or display all icons?
This will load a random emoji/icon every three seconds.

<script>
let weatherEmojis = [
  "⚡️","☀️","⛅️","☁️","💧","💦","☔️","💨","❄️"
];

var weatherEmoji = weatherEmojis[Math.floor(Math.random() * weatherEmojis.length)];
setTimeout(() => {document.location.reload();}, 3000)
</script>

<div id='emoji'></div>
<script>
  emoji.innerHTML = weatherEmoji
</script>

or if you want multiple random, you could do this

<div class="emojis"></div>
<div class="emojis"></div>
<div class="emojis"></div>

<script>

function icons() {
  let weatherEmojis = [
    "⚡️","☀️","⛅️","☁️","💧","💦","☔️","💨","❄️"
  ];

  var weatherEmoji = weatherEmojis[Math.floor(Math.random() * weatherEmojis.length)];
  return weatherEmoji
}

let elements = document.querySelectorAll(".emojis");

elements.forEach(element => {
  element.innerHTML = icons();
})
</script>