从 NodeList 输出值的问题答案

【问题标题】：Issues with outputting values from NodeList从 NodeList 输出值的问题
【发布时间】：2020-05-18 20:42:57
【问题描述】：

所以，我正在尝试做一个简单的应用程序，它可以计算某个食谱需要多少特定成分。我正在处理的问题是我无法弄清楚如何将值从 NodeList 输出到所有跨度。可能是小菜一碟，但我花了 3 个小时试图弄清楚。另外，我尝试将值分配给 span，但 JS 将其视为“未定义”。我想给 li 和 class 赋值有点乱。任何想法如何使我的代码干燥？

<p>Serves: <input id="counter" type="number" min="0"></p>
            <br>
            <h3>Ingredients: </h3>
            <ul>
                <li class="hey" value="100"><span class="count">100</span>g plain flour</li>
                <li class="hey" value="120"><span class="count">0.5</span>tsp baking powder</li>
                <li class="hey" value="140"><span class="count">0.2</span>tsp salt</li>
                <li class="hey" value="190"><span class="count">1</span>tbsp sugar</li>
                <li class="hey" value="10"><span class="count">100</span>ml milk</li>
                <li class="hey" value="55"><span class="count">1</span>small egg</li>
                <li class="hey" value="11"><span class="count">0.5</span>tbsp melted butter</li>
            </ul>

const input = document.querySelector('#counter');
const span = document.querySelectorAll('.count');
const li = document.querySelectorAll('.hey')

input.addEventListener('change', function(){
    li.forEach(function(item){
        const total = input.value * item.value;
        span.innerHTML = total;
        console.log(span.innerHTML)
    })
});

【问题讨论】：

以 li 为起点选择跨度。所以 var span = li.querySelector('.count'); 在循环内。

标签： javascript loops foreach nodelist

【解决方案1】：

在forEach循环中，可以获取每个li元素的子元素并设置其html

const input = document.querySelector('#counter');
const li = document.querySelectorAll('.hey')

input.addEventListener('input', function() {
  li.forEach(function(item) {
    const total = input.value * item.getAttribute('value');
    item.firstElementChild.innerHTML = total;
  })
});

<p>Serves: <input id="counter" type="number" min="0"></p>
<br>
<h3>Ingredients: </h3>
<ul>
  <li class="hey" value="100"><span class="count">100</span>g plain flour</li>
  <li class="hey" value="120"><span class="count">0.5</span>tsp baking powder</li>
  <li class="hey" value="140"><span class="count">0.2</span>tsp salt</li>
  <li class="hey" value="190"><span class="count">1</span>tbsp sugar</li>
  <li class="hey" value="10"><span class="count">100</span>ml milk</li>
  <li class="hey" value="55"><span class="count">1</span>small egg</li>
  <li class="hey" value="11"><span class="count">0.5</span>tbsp melted butter</li>
</ul>

【讨论】：

【解决方案2】：

出于这个原因，您也可以使用data attributes

<li class="hey" data-somevalue="100"></li>

然后通过数据集引用这个数据

var item = document.querySelectorAll(".hey")[0],
    data = item.dataset.somevalue;

【讨论】：