I need help creating a button that I can put into my JavaScript so I can output the total price

Welcome to the Free Code Camp forum. Do you already have a button? Do you know how to add an event listener to an element? If so, then you would add a click event to the button and then execute the calculation (shown above) and then display the value of Total as the innerText property value of an element where you are wanting to display the total.

If you do not know how to add an event listener to an element, then review the documentation here and see if you can implement the code yourself.

If you get stuck or have other questions, feel free to post any code you have tried and we will try to guide you to a solution.

I’m lost with what you are saying!

Which part of what I stated above do you not understand? Try to be specific.

I haven’t learned any of the stuff you just told me. I have an Id for the each place required there’s three cities and three hotel types I used an Id tag to connect them but I think I need a main id tag for ArrivalCity and Hotel so I can have everything add correctly. But when I out put using the submit button the total comes back as NAN.

Can you post more of your code or better yet can you put your code in something like Codepen and provide the url to it? That way, we can see all of the code you are attempting and have a better idea would you have already tried.

If you do not know how to add an event listener to an element, then review the documentation here and see if you can implement the code yourself.


The problem is in the values of the variables you are trying to sum. For example, below you assign a value to ArrivalCity.

 var ArrivalCity = document.getElementById("ArrivalCity").value;

The element which has an id=“ArrivalCity” looks like:

        <div id="ArrivalCity">
          <!--    <label id="ArrivalCity"></label>-->
          <input type="radio" id="Stlouis" name="city" value="40" checked>St.Louis

          <input type="radio" id="Milwaukee" name="city" value="20">Milwaukee

          <input type="radio" id="Detroit" name="city" value="35">Detroit

The element is a div element and div elements do not have a value property, so you end up assigning the value undefined to the ArrivalCity variable.

Now, if you look at the input elements nested in your div, you will see they have a value attribute which assigns a value to the value property. You need to be accessing the value of the radio input which is selected by the user. To do this, you need to write some code which finds the input element with the name=“city” and has the checked value of true and assign its value to ArrivalCity.

You can use getElementsByName to get a nodeList of all the radio inputs with a specific name attribute value. You can then research how to iterate through a nodeList of input elements and find the one with a checked property of true and obtain that element’s value. See if you can figure how to accomplish this task now that you know what needs to be done.

Tackle each of these variables one at a time. Some of these elements are dropdowns which require a slightly different approach to get the value of the selected option.

I suggest adding a console.log statement below each variable assignment, so you know when you have successfully retrieved the correct value.

Also, keep in mind that all of these values will be strings and not numbers, so once you successfully capture all of them, you will need to convert them to numbers, so they can be summed correctly.

FYI - You have many variables declared twice which is not necessary. Only declare variables once.

So the id needs to be changed so I can get the correct id so I can pull it into the Total that I need.

No, you need to use the getElementsByName method I mentioned above to get a list of all the inputs with name=“city”.

I add the getElementsName to my Java folder with the names of city and hotel in each one but nothing works.

var elements = document.getElementsByName(“city”);

    var elements = document.getElementsByName("hotel");     

did I do this right?

So far so good. Those two variables now contain the correct nodeLists.


how would I write this so it actually works. I checked inside the inspector and it doesn’t work I think this is the last part.

You have changed some of the variable names (by adding a 1 to the end)? If you can update your Codepen, then we can see what changes you have made to capture the correct values of these variables.

I just updated it so it should show everything I just did.

If you load the page and just click the button, what is the value of ArrivalCity?

Hint: Use a console.log statement to check its value.

Book My Trip

My button is coming back with an error as well.