CODEWITHSUNDEEP
javascript
William M.
William M.

Reputation: 13

Submit Button Not Calling Function

Please forgive any potential lapses in protocol and/or formatting. I'm new at this. Clicking on my "submit" button does not call the function cost(). What am I doing wrong?

<html>
<head>

<script type="text/javascript">
function cost() {
mpg = document.getElementById("mpg");
distance = document.getElementById("distance");
gasPrice = document.getElementById("gasPrice");
alert("<p>" + Math.round((distance / mpg) * gasPrice) + "</p>");
}
</script>

<h1>Trip Cost Calculator</h1>
</head>


<p> Enter mpg (miles): </p>
<input type="text" id="mpg">
</input>
</body>

<body>
<p> Enter distance (miles): </p>
<input type="text" id="distance">
</input>
</body>

<body>
<p> Enter gas price (dollars): </p>
<input type="text" id="gasPrice">
</input>
</body>

<body>
</br>
<input type="button" id="submit" value="Submit" onclick="cost()"/>
</body>

Upvotes: 0

Views: 6008

Answers (4)

ChrisR
ChrisR

Reputation: 14447

Things go wrong on all kinds of levels here, first and for all make sure you have valid html. When working with DOM nodes it's always best to make sure your browser can create a valid dom tree and that works best with valid html. Check http://validator.w3.org

Second, in your cost() function you aren't fetching the values of the input fields but the fields themself. Ofcourse this results in some weird behaviour which might explain you thinking the cost() function isn't executed. It probably is but is throwing errors you don't notice (check the debug/error console of your browser)

I've fixed up your example, check it, learn from it and read up on webstandards :)

http://jsfiddle.net/vyfqC/3/

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript">
    function cost() {
        mpg = document.getElementById("mpg").value;
        distance = document.getElementById("distance").value;
        gasPrice = document.getElementById("gasPrice").value;
        alert("<p>" + Math.round((distance / mpg) * gasPrice) + "</p>");
    }
    </script>

    <title>Trip cost calculator</title>

</head>
<body>

    <h1>Trip Cost Calculator</h1>

    <p> Enter mpg (miles): </p>
    <input type="text" id="mpg" />

    <p> Enter distance (miles): </p>
    <input type="text" id="distance" />

    <p> Enter gas price (dollars): </p>
    <input type="text" id="gasPrice" />

    <input type="button" id="submit" value="Submit" onclick="cost()"/>

</body>
​

Upvotes: 0

Miša
Miša

Reputation: 6579

You need value of those elements, not the element it self:

<script type="text/javascript">
function cost() {
mpg = document.getElementById("mpg").value;
distance = document.getElementById("distance").value;
gasPrice = document.getElementById("gasPrice").value;
alert(Math.round((distance / mpg) * gasPrice));
}
</script>

And you also need to remove all those extra <body> tags.

Upvotes: 1

Travis J
Travis J

Reputation: 82267

Your body tags are incorrect. You also need to close your html tag. Moreover, use the .value property to access the input fields.

<html>
<head>

<script type="text/javascript">
 function cost() {
  mpg = document.getElementById("mpg").value;
  distance = document.getElementById("distance").value;
  gasPrice = document.getElementById("gasPrice").value;
  alert("<p>" + Math.round((distance / mpg) * gasPrice) + "</p>");
 }
</script>

<h1>Trip Cost Calculator</h1>
</head>


<body>

<p> Enter mpg (miles): </p>
<input type="text" id="mpg">
</input>
<p> Enter distance (miles): </p>
<input type="text" id="distance">
</input>
<p> Enter gas price (dollars): </p>
<input type="text" id="gasPrice">
</input>
</br>
<input type="button" id="submit" value="Submit" onclick="cost()"/>
</body>
</html>

Upvotes: 0

Shashank Kadne
Shashank Kadne

Reputation: 8101

You are manipulating objects.Retrieve values using value property like this.

mpg = document.getElementById("mpg").value;
distance = document.getElementById("distance").value;
gasPrice = document.getElementById("gasPrice").value;

Upvotes: 1

Related Questions