CODEWITHSUNDEEP
javascript
Robincho Bibanka
Robincho Bibanka

Reputation: 83

js calculating total price from input number and show

I have three types for tickets. Children - cost 8$, retirees - cost 10$ and adults - cost 12$ and i have 3 input numbers and i want when someone of these three input change to calculate and print in html total price

This is my html

children<input type="number" id="children" name="children" min="0" max="20" value="0" onchange="myScript">
adults<input type="number" id="adults" name="adults" min="0" max="20" value="0" onchange="myScript">
retirees<input type="number" id="retirees" name="retirees" min="0" max="20" value="0" >

This is my js

function totalPrice(){
   var total = 0 
   var children = document.getElementsByName('children');
   var children = document.getElementsByName('adults');
   var children = document.getElementsByName('retirees');
   total = (parseInt(children) * 8) + (parseInt(adults) * 12) + (parseInt(retirees) * 10);

Here i dont know how to print in html total price

I want to look something like that

enter image description here

Upvotes: 0

Views: 1712

Answers (4)

Tushar Wasson
Tushar Wasson

Reputation: 556

          function totalPrice(){
       var total = 0 
       var children = document.getElementsByName('children')[0].value;
       var adults = document.getElementsByName('adults')[0].value;
       var retirees = document.getElementsByName('retirees')[0].value;
       total = (children * 8) + (adults * 12) + (retirees * 10);
       console.log(total);
       document.getElementById('totalPrice').textContent=total;
       
       }
  children <input type="number" id="children" name="children" min="0" max="20" value="0" onKeyUp="totalPrice()">
    adults <input type="number" id="adults" name="adults" min="0" max="20" value="0" onKeyUp="totalPrice()">
    retirees <input type="number" id="retirees" name="retirees" min="0" max="20" value="0" onKeyUp="totalPrice()">
    <div id="totalPrice" style="color:red"></div>

Upvotes: 0

robert
robert

Reputation: 6142

One possible way is to place a div for displaying Total in html

<div id="total"></div>

then attach an "eventListener" for change to each input field to trigger the calculation

document.querySelectorAll("input").forEach(el => {
  el.addEventListener("change", () => {
    totalPrice();
  });
});

then update the value in html with:

totalDiv.innerHTML = `<h3>Total: ${total}$</h3>`;

Working Stackblitz

Upvotes: 1

voxtool
voxtool

Reputation: 355

As these are input fields you can just use their value

function totalPrice(){
   var total = 0 
   var children = document.getElementsByName('children');
   var adults = document.getElementsByName('adults');
   var retirees = document.getElementsByName('retirees');
   total = (parseInt(children.value) * 8) + (parseInt(adults.value) * 12) + (parseInt(retirees.value) * 10);

Upvotes: 0

Wamadahama
Wamadahama

Reputation: 1648

Given a div below the <inputs>, in the form of <div id="price"></div>

You could set the price this way:

let price_div = document.querySelector("#price")
// Apply whatever formatting to the price you want.
price_div.innerHTML = total

Upvotes: 0

Related Questions