I'm having problems combining HTML and JavaScript

Question

I am trying to make a web page layout that is designed to use HTML and Javascript to return the cost of a rented car for any given number of days. The HTML part of the page works fine, but when I click the button to calculate the amount, it does nothing. I browsed the Internet in the hope of finding an answer to this question, but no matter what I tried, it does not seem to want to work.

Here is the HTML part of my code that works 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 part of JavaScript that I am trying to give the program when the Click for Calculation button is clicked:

<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>

- , , , . !

Answer 1

ID, getElemementById . HTML :

<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>

, "MilesDriven" "TotalCharge", HTML. JavaScript:

 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);
   }

, - , .

alert(TotalCharge);

to

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

Answer 2

, :

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

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

Answer 3

qwertymk, script HTML id TotalCharge, DOM.

javascript TotalCharge, value DOM TotalCharge. DOM. , DOM.

, , qwertymk - DOM :

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

DOM , :

TotalCharge.value = // your expression

Answer 4

,

, , , , :

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

- . /console.log, :

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

/

. -, document.getElementById, name. :

1) id,

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

2) getElementById getElementsByName

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

,

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

but these two elements are not defined in the HTML that you inserted here.

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

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

FROM

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

NB: These items do not have to be <input>s.

Last tip: debug your code along the way

You should use the web developer console and console.log('message').

By the way, you added the jQuery tag to your question, but jQuery doesn't seem to be used here. It's great to learn vanilla JavaScript / HTML, but jQuery will make your life easier.