CODEWITHSUNDEEP
javascripthtml
Aykhan
Aykhan

Reputation: 31

How can I get data from HTML and then calculate it and print it out using JS?

I was assigned do the job of a grocery store, and get data from html about the customer, what they buy in what quantity, and their price. With the click of a button, it's supposed to display the information, along with the calculated cost and sales tax of the person (like a check). I am not able to do this, and cannot find my mistake. Code:

function calculateTotal() {
  var customerName = document.getElementById("name").value;
  var fruitName = document.getElementById("fruits");
  var i = fruitName.selectedIndex;
  var itemName = fruitName.options[i].text;
  var itemQuantity = document.getElementById("qty").value;
  var unitPrice = document.getElementById("unitPrice").value;
  var tax = document.getElementById("tax");
  var l = tax.selectedIndex;
  var salesTaxRate = tax.options[l].value;
  var output = "";
  var total = parseFloat(unitPrice) * parseFloat(Quantity)
  var salesTax = parseInt(salesTaxRate) * total
  var grandTotal = salesTax + total
  document.write('Customer Name: ', customerName)
  document.write( < br / > )
  document.write('Item Name: ', fruitName)
  document.write( < br / > )
  document.write('Quantity: ', itemQuantity)
  document.write( < br / > )
  document.write('Unit Price: ', unitPrice)
  document.write( < br / > )
  document.write(total)
  document.write( < br / > )
  document.write(salesTax)
  document.write( < br / > )
  document.write(grandTotal)
}
<!DOCTYPE html>
<html>

<head>
  <title>Unit 2 Assignment</title>
</head>

<body>
  Customer Name:
  <input type="text" id="name" /><br /> Item Name
  <select id="fruits">
    <option value="apple">Apple</option>
    <option value="mango">Mango</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
  </select><br/> Quantity
  <input type="text" id="qty" /><br /> Unit Price
  <input id="unitPrice" type="number">
  <br /> Sales Tax
  <select id="tax">
    <option value="0.025">2.5%</option>
    <option value="0.05">5%</option>
    <option value="0.08">8%</option>
    <option value="0.10">10%</option>
    <option value="0.60">60%</option>
    <option value="1">100%</option>
    <option value="2">200%</option>
  </select>
  <br />
  <button id="calculateButton" onclick="calculateTotal()" />Calculate Total</button><br />
  <p id="output">
  </p>

  <script type="application/javascript" src="assignment_2.js">
  </script>

</body>

</html>

Upvotes: 0

Views: 928

Answers (1)

Barmar
Barmar

Reputation: 781255

You should put the output you want to display in the output variable, not use document.write(). You can use a template literal to simplify writing this.

You had a few incorrect variables in your calculations and output: Quantity should be itemQuantity, and fruitName should be itemName.

When calculating the tax, you need to use parseFloat(salesTaxRate).

function calculateTotal() {
  var customerName = document.getElementById("name").value;
  var fruitName = document.getElementById("fruits");
  var i = fruitName.selectedIndex;
  var itemName = fruitName.options[i].text;
  var itemQuantity = document.getElementById("qty").value;
  var unitPrice = document.getElementById("unitPrice").value;
  var tax = document.getElementById("tax");
  var salesTaxRate = tax.value;
  var total = parseFloat(unitPrice) * parseFloat(itemQuantity)
  var salesTax = parseFloat(salesTaxRate) * total
  var grandTotal = salesTax + total
  var output = `Customer Name: ${customerName}<br>
Item Name: ${itemName}<br>
Quantity: ${itemQuantity}<br>
Unit Price: ${unitPrice}<br>
${total}<br>
${salesTax}<br>
${grandTotal}`
  document.getElementById("output").innerHTML = output;
}
<!DOCTYPE html>
<html>

<head>
  <title>Unit 2 Assignment</title>
</head>

<body>
  Customer Name:
  <input type="text" id="name" /><br /> Item Name
  <select id="fruits">
    <option value="apple">Apple</option>
    <option value="mango">Mango</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
  </select><br/> Quantity
  <input type="text" id="qty" /><br /> Unit Price
  <input id="unitPrice" type="number">
  <br /> Sales Tax
  <select id="tax">
    <option value="0.025">2.5%</option>
    <option value="0.05">5%</option>
    <option value="0.08">8%</option>
    <option value="0.10">10%</option>
    <option value="0.60">60%</option>
    <option value="1">100%</option>
    <option value="2">200%</option>
  </select>
  <br />
  <button id="calculateButton" onclick="calculateTotal()" />Calculate Total</button><br />
  <p id="output">
  </p>

  <script type="application/javascript" src="assignment_2.js">
  </script>

</body>

</html>

Upvotes: 1

Related Questions