CODEWITHSUNDEEP
javascript
JS_noob
JS_noob

Reputation: 97

Adding generated values from inputs

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>

Upvotes: 1

Views: 242

Answers (2)

acdcjunior
acdcjunior

Reputation: 135762

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/

Upvotes: 1

Murali Nepalli
Murali Nepalli

Reputation: 1618

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

Upvotes: 0

Related Questions