CODEWITHSUNDEEP
javascript
JS_noob
JS_noob

Reputation: 97

Calculating multiple input values in JavaScript

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

Upvotes: 1

Views: 65

Answers (1)

pavel
pavel

Reputation: 27082

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/

Upvotes: 2

Related Questions