CODEWITHSUNDEEP
javascriptajaxhtml
Manjeshwar
Manjeshwar

Reputation: 105

Calculate the values of input where each input has different prices. Any shorter code for this?(javascript only)

The code below is working fine but what if there are 100 inputs? any shorter way to do this? 

function checkTotal() {
  var a = document.getElementById("sandwich").value;
  var b = document.getElementById("burger").value;
  var c = document.getElementById("cake").value;
  var d = document.getElementById("coffee").value;
  document.getElementById("total").value = parseInt(a) * 10 + parseInt(b) * 5 + parseInt(c) * 15 + parseInt(d) * 20;
}
<form role="form" name="listForm">
  <label>Sandwich</label>
  <input type="number" id="sandwich" value="0" onkeyup="checkTotal()"><br>

  <label>Burger</label>
  <input type="number" id="burger" value="0" onkeyup="checkTotal()"><br>

  <label>Cake</label>
  <input type="number" id="cake" value="0" onkeyup="checkTotal()"><br>

  <label>Coffee</label>
  <input type="number" id="coffee" value="0" onkeyup="checkTotal()"><br> Total: <input type="text" size="2" name="total" id="total" value="0" />
</form>

1) Here each input article has a different price. 2) The value of the input should be mutiply with its price given(Eg. if the sandwich has a price:30, and user inputs value 2 it should calculte the total=price*input value.) 3) i have my code which is working fine but is the above code is the right way to do? 4) what if there are 100 of article inputs. is there shorter code or should i create variable for each one?

Upvotes: 2

Views: 72

Answers (2)

Serge K.
Serge K.

Reputation: 5323

Another way to try is to give your elements a class and some data attributes that can be retrieved by JavaScript using dataset. You can then use them to make your calculations. That way you get rid of ids and you just have to change the HTML code to add a new element.

function checkTotal() {
  var total = 0,
      foods = document.querySelectorAll('.food');
  
  for (var i = 0; i < foods.length; i++) {
    var food = foods[i],
        name = food.dataset.item,
        price = parseInt(food.dataset.price),
        howMany = parseInt(food.value);
    
    console.log(howMany, name, 'costs', (howMany * price));
    
    total += howMany * price;
  }
  
  document.getElementById('total').value = total;
}
<form role="form" name="listForm">
  <label>Sandwich</label>
  <input class="food" data-item="sandwich" data-price="30" type="number" value="0" onBlur="checkTotal()"><br>

  <label>Burger</label>
  <input class="food" data-item="burger" data-price="10" type="number" value="0" onBlur="checkTotal()"><br>

  <label>Cake</label>
  <input class="food" data-item="cake" data-price="5" type="number" value="0" onBlur="checkTotal()"><br>

  <label>Coffee</label>
  <input class="food" data-item="coffee" data-price="15" type="number" value="0" onBlur="checkTotal()"><br> 
  Total: <input type="text" size="2" name="total" id="total" value="0" />
</form>

As a side note, you should give a try on Angular or Knockout which can help you to achieve those operations.

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68373

what if there are 100 of article inputs. is there shorter code or should i create variable for each one?

You can maintain a map

var idPriceMap = {
  "sandwich" : 20,
  "burger" : 10,
  "cake" : 5,
  "coffee" : 10
};

You can iterate this and produce your value using reduce

var output = Object.keys( idPriceMap ).reduce( function(a,b){
   var value = +document.getElementById( b ).value;
   a += value * idPriceMap[ b ];
   return a;
}, 0);
document.getElementById( "total" ).value = output;

Upvotes: 3

Related Questions