简体   繁体   中英

Have to take the quantity from three different HTML forms, and calculate the Total price. What am i doing wrong?

I am a complete newb to JavaScript so I really don't know what the hell I'm doing. When I enter the quantities on my site and click the button, nothing shows up. Can anyone steer me into the right direction. Heres the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">

<script>
function calculateTotal ()
{
    var balls = parseInt(document.getElementById("soccerballquantity").value);
    var jerseys = parseInt(document.getElementById("soccerjerseyquantity").value);
    var cleats = parseInt(document.getElementById("soccercleatquantity").value);
    var ballTotal = balls * 30;
    var jerseyTotal = jerseys * 100;
    var cleatTotal = cleats * 100;
    var realTotal = ballTotal + jerseyTotal + cleatTotal;
    document.getElementById("test").value=realTotal;
    }

</script>
</head>

<body>


<h2>
<center>
Welcome to my Soccer Store
</center>
</h2>


<div>

<table>
   <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
   </tr>
  <tr>
      <td>Soccer ball</td>
      <td>$30</td>
      <td><input type="text" value="test" id="soccerballquantity"></td>
   </tr>
   <tr>
  <td>Soccer Jersey</td>
  <td>$100</td>
  <td><input type="text" value="test" id="soccerjerseyquantity"></td>
</tr>
   <tr>
  <td>Soccer Cleats</td>
  <td>$200</td>
  <td><input type="text" value="test" id="soccercleatquantity"></td>
   </tr>
<tr>
<td> <input type="button" value="clickme" onclick="calculateTotal"> </td>
<td> <input type="text" value="test"> </td>
</tr>
</table>

<hr>
<p> <center> Spend $250 or more and get an extra %10 off!! </center> </p>
</div>

</body>

</html>

I know this is really sucky code. Any help would be appreciated.

2 problems:

  • you need to add () after calculateTotal in your onclick
  • your don't have an id="test" on the target field

Working fiddle: http://jsfiddle.net/Qn4Tv/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM