javascript - 使用 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 填充所有 <span>具有类 hot-drink 的元素使用变量 hot-drink-status() 应用于它们.

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

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

尝试(不要在变量名称中使用减号 - camel case 来代替)

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>