jquery - I'm Having Problems Merging HTML and JavaScript -

i trying make mock webpage designed use html , javascript return cost of rental car given number of days. html portion of page works great, when press button calculate total, not anything. i've looked around internet in hopes of finding answer issue, no matter try doesn't seem want work.

here html portion of code, working 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 calculation</button> 

here javascript portion trying make program print out when "click calculation" button 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 easy fix, beginner , have been mulling through code quite while little success, appreciated. thank time!

you didn't give of inputs id, using "getelemementbyid" method grab values. change html 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 grab values "milesdriven" , "totalcharge" inputs, aren't defined in html. use 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 want pop message other total. change

alert(totalcharge); 

to

alert("your total $" + totalcharge); 

check out updated fiddle link above