Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Joshua Comrie
Joshua Comrie
3,861 Points

Javascript Flight Calculator. Need help please :)

Hi guys. I am fairly new to JavaScript and need to build a flight calculator for my college course. What I need to know is how to assign a price to an item in a select box. There will be other charges I have added into radio buttons such as flight meals etc.

So ye all I need to know is how to add prices to each option in the select box and radio buttons, so it then calculates the total when I press the calculate button. If anyone could help me with this, it would be highly appreciated. I thought I'd come here before looking for tutorials etc. as I seem to get answers fairly quickly and accurately.

Thanks guys I will post the HTML below, so you have a better understanding.

Joshua Comrie
Joshua Comrie
3,861 Points

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="styleshee.css"> <meta charset="UTF-8"> <title>Flight Calculator</title> </head> <body> <h1>Flight Calculator</h1> <h3>Location</h3> <select> <option>- Please Select -</option> <option>Doncaster/Sheffield</option> <option>East Midlands</option> <option>Gatwick</option> <option>Heathrow</option> <option>Leeds/Bradford</option> <option>Manchester</option> </select>

<h3>Destination</h3>
<select>
    <option>- Please Select -</option>
    <option>Croatia</option>
    <option>Germany</option>
    <option>Italy</option>
    <option>Mexico</option>
    <option>Portugal</option>
    <option>Spain</option>
    </select>
<h3>Adults</h3>
<select>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

<h3>Children</h3>
<select>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

<h3>How will you be flyng with us?</h3>
<select>
    <option>- Please Select -</option>
    <option>Economy</option>
    <option>First Class (+ £100.00)</option>
    <option>Business Class (+ £500.00)</option>
</select>

    <h3>Extra Legroom</h3>
    <form>
        <input type="radio" name="?"> Yes
        <input type="radio" name="?"> No
    </form>

<h3>Flight Meal</h3>
    <form>
        <input type="radio" name="?"> Yes
        <input type="radio" name="?"> No
    </form><br>
<button>Calculate</button>


<script src="script.js"></script>

</body> </html>

1 Answer

Emmanuel C
Emmanuel C
10,637 Points

Hi Joshua,

Option and input elements have attributes called "value" that can hold information or values that is different from what is displayed. You can assign the prices to these attributes then calculate the total by accessing that value. So something like...

<select id="destinations">
    <option value="0">- Please Select -</option>
    <option value="2000">Croatia</option>
    <option value="2250">Germany</option>
    <option value="2300">Italy</option>
</select>

Excepted with your prices, this also works with input. Also I would give the select tags Ids, that way you can access them in your JS for calculation. I'll leave it to you to figure out how to...

Get all the child elements of the select element

Loop through each and check which are selected

Get the value from each selected and add them to a total

Good luck!

Joshua Comrie
Joshua Comrie
3,861 Points

Hi Emmanuel. Thank you for your help, it's highly appreciated. I'll see how this goes. If I have any problems etc. I'll give you a shout. Thanks again :)