Adding generated values from inputs

Question

I have a site where I can enter the amount of an item, it will then take that input value and return the result on the page. I am then trying to get the results of all the items and return a grand total.

The issue is when I a loop to do this it will only add the first one.

I created a fiddle: https://jsfiddle.net/rc1mgLj5/4/

I am using querySelectorAll and using the length of all the classNames for the result of the first return.

Then looping them after parsing them to a number from text.

But at the moment it is only doing the first calculation. If I delete the for loop the first part works correctly again.

So since its only doing the first calculation for the first item, I get NaN for the second because it does not have a number to parse.

const total = document.querySelectorAll(".tot");
const price = document.querySelectorAll(".cost");
let textval = document.querySelectorAll(".qty-item");
const cal = document.getElementById("calc");
const errorMessage = document.querySelectorAll(".error");

cal.addEventListener("mouseover", function(e) {
  console.log(total);
  for (var i = 0; i < price.length; i++) {
    let xPrice = price[i].innerHTML.split("$");
    let parsePrice = parseFloat(xPrice[1]);
    if (textval[i].value === "" || isNaN(textval[i].value)) {
      setMessage("Please enter a number", "red");
    } else {
      let x = parseFloat(textval[i].value);
      let y = parsePrice;

      let z = x * y;

      total[i].innerText = z.toFixed(2);

      total[i].innerText = z;

      for (i = 0; i < total.length; i++) {
        let j = parseFloat(total[i].innerHTML);

        console.log(j);
      }
    }
  }
});

HTML:

<body>
<div class="main">
<span class="title">A Title</span>
</div>
<div class="content">
<div class="item">
  <span>Item 1</span>
</div>
<div>
  <span class="cost">$100.00</span>
</div>
<div id="qty">
  <label>QTY:</label><input placeholder="0" class="qty-item">
  <p class="error"></p>
</div>
<div class="tot">
  <span><label>TOTAL</label> $0.0</span>
</div>
</div>
<br><br>
<div class="main">
 <span class="title">A Title</span>
</div>
<div class="content">
 <div class="item">
  <span>Item 2</span>
</div>
<div>
  <span class="cost">$50.00</span>
</div>
<div class="qty">
  <label>QTY:</label><input placeholder="0" class="qty-item">
  <p class="error"></p>
</div>
<div class="tot">
  <span><label>TOTAL</label> $0.0</span>
</div>
</div>

<div class="calc-button">
<button id="calc">Calculate Prices</button>
</div>

</body>

Felipe Augusto · Accepted Answer · 2019-06-17 00:44:57Z

1

You are nesting two fors using the same i variable as index:

cal.addEventListener('mouseover', function(e) {
  console.log('total', total);
  for (var i = 0; i < price.length; i++) {
      //...

      for (i = 0; i < total.length; i++) {           // <== uses "i" again
        let j = parseFloat(total[ii].innerHTML);

        console.log(j);

      }
    }
  }
});

Just replace that second for's variable with another name. Example:

for (let k = 0; k < total.length; k++) {
  let j = parseFloat(total[k].innerHTML);
  console.log(j);
}

Demo: https://jsfiddle.net/acdcjunior/gpLvszx3/

edited Jun 17, 2019 at 0:44

Felipe Augusto

8,22413 gold badges43 silver badges75 bronze badges

answered Jun 17, 2019 at 0:19

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felipe Augusto · Accepted Answer · 2019-06-17 00:44:17Z

0

It seems you are using the same variable "i" for both loops and i is being reset in the second loop to 3 and hence the main loop runs only once. So i removed the following code and calculated the total outside main loop. seems to be working fine now. https://jsfiddle.net/uxr7ac9k/7/

total[i].innerText = z;
for (i=0;i < total.length; i++){
    let j = parseFloat(total[i].innerHTML);
    console.log(j);
}

edited Jun 17, 2019 at 0:44

Felipe Augusto

8,22413 gold badges43 silver badges75 bronze badges

answered Jun 17, 2019 at 0:27

Murali Nepalli

1,61811 silver badges17 bronze badges

Collectives™ on Stack Overflow

Adding generated values from inputs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related