CODEWITHSUNDEEP
javascriptloopsforeachnodelist
tomgru23
tomgru23

Reputation: 109

Issues with outputting values from NodeList

So, I am trying to do a simple app which calculates how much of a particular ingredient one needs for some recipe. The problem which I am dealing with is that I cannot figure out how to output the values from NodeList to all spans. Probably is a piece of cake, but I spent past 3 hours trying to figure it out. Also, I tried to assign values to span, but JS threw it as "undefined". I guess giving values to li and class is a bit messy. Any ideas how to make my code DRY?

<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)
    })
});

Upvotes: 1

Views: 40

Answers (2)

Sergii Onish
Sergii Onish

Reputation: 140

as alternative you can use data attributes for this reasons

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

and then refer to this data via dataset

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

Upvotes: 0

Yousaf
Yousaf

Reputation: 29344

inside the forEach loop, you can get the child element of each li element and set its 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>

Upvotes: 1

Related Questions