使用 Javascript 用类名填充元素

Question

我有一些看起来像这样的HTML

<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>

我想使用 javascript 用hot-drink变量hot-drink-status()应用于它们的类填充所有<span>元素。

到目前为止，我只设法对其中一个元素执行此操作。我编写的代码如下所示：

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

我相信我需要将[0]更改为其他内容。我已经尝试过[i]但这不起作用。

我知道querySelectorAll正在工作，因为它允许我将脚本应用于任何元素。我只是无法将脚本应用于所有元素。

我正在寻找的结果是要呈现如下的 HTML

<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>

具有类hot-drink的所有元素都填充了文本"可用">

Answer 1

尝试(不要在变量名称中使用减号字符 - 骆驼大小写(

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>