4

I am trying to make a mock webpage that is designed to use HTML and Javascript to return the cost of a rental car for any given number of days. The HTML portion of the page works great, but when I press the button to calculate a total, it does not do anything. I've looked around the Internet in hopes of finding an answer for this issue, but no matter what I try it doesn't seem to want to work.

Here is the HTML portion of my code, which is working just fine

<form>
Name: <input type="text" name="name"><br>
Street Address: <input type="text" name="street">
City: <input type="text" name="city"><br>
State: <input type="text" name="state">
Zip Code: <input type="text" name="zip"><br>
Beginning Odometer Reading: <input type="text" name="odometerbegin">
Ending Odometer Reading: <input type="text" name="odometerend"><br>
Days of Use: <input type="number" name="days">
</form>

<button onclick="CarRentalTotals()">Click for Calculation</button>

Here is the JavaScript portion that I am trying to make the program print out when the "Click for Calculation" button is pressed:

<script>
function CarRentalTotals() {

var name = document.getElementById('name').value;
var street = document.getElementById('street').value;
var city = document.getElementById('city').value;
var state = document.getElementById('state').value;
var zip = document.getElementById('zip').value;
var odometerbegin = document.getElementById('odometerbegin').value;
var odometerend = document.getElementById('odometerend').value;
var days = document.getElementById('days').value;
var MilesDriven = document.getElementById('MilesDriven').value;
MilesDriven = odometerend - odometerbegin;
var TotalCharge = document.getElementById('TotalCharge').value;
TotalCharge = days * 15 + MilesDriven * 0.12;

}
</script>

Something tells me that this is an easy fix, but I am just a beginner and have been mulling through this code for quite a while with little success, so any help would be appreciated. Thank you for your time!

Improve this question
5
  • put alert('hi'); at the start of your function, which will tell you whether the function is actually executing Commented Oct 7, 2013 at 1:27
  • 1
    Open your browsers console (f12) and check for errors. That should be the first step whenever something "doesnt' work" Commented Oct 7, 2013 at 1:28
  • You're never assigning the result of the calculation to anything. You have to write the result of TotalCharge to the HTML. Commented Oct 7, 2013 at 1:28
  • If you are using getElementById you need to give your elements ID's rather than just names... Commented Oct 7, 2013 at 1:46
  • So would I be able to use innerHtml in order to write the fields back to the HTML file? Commented Oct 7, 2013 at 1:59

4 Answers 4

Reset to default
2

You didn't give any of your inputs an ID, but you are using the "getElemementById" method to grab their values. Change your HTML to this:

<form>
    Name: <input type="text" id="name"><br>
    Street Address: <input type="text" id="street">
    City: <input type="text" id="city"><br>
    State: <input type="text" id="state">
    Zip Code: <input type="text" id="zip"><br>
    Beginning Odometer Reading: <input type="text" id="odometerbegin">
    Ending Odometer Reading: <input type="text" id="odometerend"><br>
    Days of Use: <input type="number" id="days">
</form>

Also, you're trying to grab values from "MilesDriven" and "TotalCharge" inputs, which aren't defined in your HTML. Use the following JavaScript instead:

 function CarRentalTotals() {
        var name = document.getElementById('name').value;
        var street = document.getElementById('street').value;
        var city = document.getElementById('city').value;
        var state = document.getElementById('state').value;
        var zip = document.getElementById('zip').value;
        var odometerbegin = document.getElementById('odometerbegin').value;
        var odometerend = document.getElementById('odometerend').value;
        var days = document.getElementById('days').value;
        MilesDriven = odometerend - odometerbegin;
        TotalCharge = days * 15 + MilesDriven * 0.12;
        alert(TotalCharge);
   }

Updated Fiddle

If you want the pop up message to say something other than just the total. Change

alert(TotalCharge);

to 

alert("Your total is $" + TotalCharge);

Check out the updated fiddle link above

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That helped out a lot, Mr. Banks. Thanks a lot! :) However, is there any way to put a description on that value so that it isn't just a number and would read out like "Total Cost: 60" or something like that?
@mkgardner See the updated answer. If this helped, please vote and accept the answer so it'll be useful to other people with similar issues
1

Without really looking at the code, change this:

var TotalCharge = document.getElementById('TotalCharge').value;
TotalCharge = days * 15 + MilesDriven * 0.12;

To This

var TotalCharge = document.getElementById('TotalCharge');
TotalCharge.value = days * 15 + MilesDriven * 0.12;

And do the same for all other occurrences of that

Improve this answer

Comments

1

To expand on qwertymk's answer, if the goal of your script is to display the total charge inside of an HTML element with id TotalCharge, you need to update the DOM accordingly.

Currently what you are doing is creating a javascript variable TotalCharge set to the value property of the TotalCharge DOM object. This creates a copy of the string value without a reference back to the DOM object. When you later change the value of your variable, it isn't reflected in the DOM.

To accomplish that, you should do as qwertymk said -- first assign a reference the DOM object in your variable:

var TotalCharge = document.getElementById("TotalCharge");

At this point you can change properties on the DOM object by why of your reference, and these changes will be reflected on your page:

TotalCharge.value = // your expression
Improve this answer

Comments

1

Make sure your function is being called

First thing first, make sure your function is being called by putting either of the following statements at the beginning, as suggested in the comments:

function CarRentalTotals() {
  alert('CarRentalTotals called !');
  console.log('CarRentalTotals, called');
  ...

Display the result of your calculation

Then, you have to do something with the result of your calculation. Let's start with another alert / console.log, right at the end of your function :

  ...
  alert('MilesDriven = ' + MilesDriven + ', TotalCharge = ' + TotalCharge);
  console.log('MilesDriven = ' + MilesDriven + ', TotalCharge = ' + TotalCharge);
}

Fix your value retrieval / calculation code

Next we have to make this calculation work. First off, you're retrieving the values with document.getElementById, but you only defined the name attribute. You could either:

1) Add an id attribute to each field, like

City: <input type="text" name="city" id="city"><br>

2) Or replace getElementById with getElementsByName

var city = document.getElementsByName('city')[0].value;

Render the result on the page

Finally, your calculation ends with 

var MilesDriven = document.getElementById('MilesDriven').value;
MilesDriven = odometerend - odometerbegin;
var TotalCharge = document.getElementById('TotalCharge').value;
TotalCharge = days * 15 + MilesDriven * 0.12;

but those two elements are not defined in the HTML you pasted here.

If you want to display those values in HTML elements, your code should look like:

var MilesDrivenElt = document.getElementById('MilesDriven');
MilesDrivenElt.value = odometerend - odometerbegin;
var TotalChargeElt = document.getElementById('TotalCharge');
TotalChargeElt.value = days * 15 + MilesDrivenElt.value * 0.12;

With

Miles Driven: <input type="number" name="MilesDriven" id="MilesDriven"><br>
Total Charge: <input type="number" name="TotalCharge" id="TotalCharge"><br>

NB: Those elements aren't obligated to be <input>s.

One last tip: debug your code along the way

You should make use of your web developer console and the console.log('message') method.

BTW, you added the jQuery tag to your question, but jQuery does not seem to be used here. It is great to learn vanilla JavaScript / HTML, but jQuery will make your life easier.

Improve this answer

2 Comments

Thank you for the really detailed response! I appreciate it and made edits. However, the only alert box that comes out of the code is the first one, the one that in your code says "CallRentalTotals called!". The second popup doesn't come up.
@mkgardner That's great, the first one is here! If the second doesn't come up, it probably means that there is an error in the code between the two. It means that it's time for you to use the console (webmasters.stackexchange.com/questions/8525/…) to debug your code. Try opening it, then reloading your page and executing your code, and you'll see error messages appear.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.