使用Javascript用类名填充元素

Question

I have some HTML which looks like this

<p>Latte: <span class="hot-drink"></span></p>
<p>Capuccino: <span class="hot-drink"></span></p>
<p>Coca Cola: <span class="cold-drink"></span></p>
<p>Water: <span class="cold-drink"></span></p>
<p>Iced tea: <span class="cold-drink"></span></p>

I would like to use javascript to populate all of the <span> elements with the class hot-drink applied to them with the variable hot-drink-status() .

So far I have managed to do this to only one of the elements. The code I wrote looks like this:

var hot-drink = "Avaiable";
document.querySelectorAll('.hot-drink')[0].innerHTML = hot-drink;

I believe I need to change the [0] to something else. I have tried [i] but this does not work.

I know that querySelectorAll is working as it allows me to apply the script to any element. I am just unable to apply the script to all element.

The outcome I am looking for is the HTML to be rendered as below

<p>Latte: <span class="hot-drink">Available</span></p>
<p>Capuccino: <span class="hot-drink">Available</span></p>
<p>Coca Cola: <span class="cold-drink"></span></p>
<p>Water: <span class="cold-drink"></span></p>
<p>Iced tea: <span class="cold-drink"></span></p>

All elements with the class hot-drink are populated with the text "Available"

Answer 1

Try (do not use minus char in variable names - camel case instead)

 var hotDrink = 'Available'; document.querySelectorAll('.hot-drink').forEach(el=> el.innerHTML= hotDrink) 

 <p>Latte: <span class="hot-drink"></span></p> <p>Capuccino: <span class="hot-drink"></span></p> <p>Coca Cola: <span class="cold-drink"></span></p> <p>Water: <span class="cold-drink"></span></p> <p>Iced tea: <span class="cold-drink"></span></p>