Calculating multiple input values in JavaScript

Question

I have multiple items, where you are able to input the QTY. I have wrote the function but it only works for the first item.

I used the same classNames and ID's in the HTML, So I think it would add up everywhere there is a input.

I put it in a fiddle https://jsfiddle.net/detgz2Ls/

I have to keep everything with the same class/ID's, because this is going to be a list that is able to generate multiple items dynamically.

<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>

//JavaScript

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

cal.addEventListener('mouseover',function(e){

let xPrice =price.split("$");
let parsePrice = parseFloat(xPrice[1]);
if(textval.value==="" || isNaN(textval.value)){

console.log("error");

}else {
let x = parseFloat(textval.value);
let y =parsePrice;

let z = x * y;

total.innerText = z.toFixed(2);
}
});

querySelector selects the first element only

baao
– baao

2019-06-16 21:03:06 +00:00
Commented Jun 16, 2019 at 21:03 — baao
– baao, Commented Jun 16, 2019 at 21:03

pavel · Accepted Answer · 2019-06-16 21:41:20Z

First you need to use querySelectorAll to find all elements, not just the first one.
Then you have to iterate over whole collection of these elements (for loop).

const total = document.querySelectorAll(".tot")
const price = document.querySelectorAll(".cost"); // remove .innerHTML here -- elements collection has no .innerHTML, no .value, etc.
let textval = document.querySelectorAll('.qty-item');
const cal = document.getElementById("calc");
const errorMessage = document.querySelectorAll('.error');

cal.addEventListener('mouseover',function(e){
    // loop through all price elements
    for (var i = 0; i < price.length; i++) {
        let xPrice =price[i].innerHTML.split("$"); // use .innerHTML here
        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);
        }
    }
});

https://jsfiddle.net/o92nz1gm/2/

Collectives™ on Stack Overflow

Calculating multiple input values in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related