I'm Having Problems Merging HTML and JavaScript

Question

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!

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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