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

Need help with a JavaScript flight calculator please

Hi guys. I am fairly new to JavaScript and need to create a Flight calculator application for college. I need to calculate the cost of a flight, according to the select boxes chosen and radio buttons.

I have managed to pull the values of each select box and radio buttons through the HTML file and the values show in the dev tools console.

I need to write some sort of function(or something else) to multiply the location and destinations chosen, multiply the cost of the flights with how many adults chosen, to subtract a discount for each child selected and the radio buttons to add 10 on if chosen so.

The total cost is set to 100. Otherwise it doesn't show properly in the console, as I have a function that displays an alert with a message + totalCost

This sounds like a handful and I've been playing around with things, but I can't get things to work. If anybody could help, it would be highly appreciated. I will post the code below.

Thank you!

/* Total Cost */ const totalCost = 100;

function total(){ window.alert("Your total flight cost is " + totalCost); }

/* Value Functions */

function getSelectValue(){ const selectedValue = document.getElementById('location').value; console.log(selectedValue) } function getSelectValue2(){ const selectedValue2 = document.getElementById('destination').value; console.log(selectedValue2) }

function getSelectValue3(){ const selectedValue3 = document.getElementById('adults').value; console.log(selectedValue3) }

function getSelectValue4(){ const selectedValue4 = document.getElementById('children').value; console.log(selectedValue4) }

function getSelectValue5(){ const selectedValue5 = document.getElementById('flight').value; console.log(selectedValue5) }

/* Extras */

function legroomYes(){ const selectedValue6 = document.getElementById('legroom').value; console.log(selectedValue6) }

function legroomNo(){ const selectedValue7 = document.getElementById('no-legroom').value; console.log(selectedValue7) }

function mealYes(){ const selectedValue8 = document.getElementById('flightmeal').value; console.log(selectedValue8) }

function mealNo(){ const selectedValue9 = document.getElementById('no-meal').value; console.log(selectedValue9) }

<body> <!-- Main Section --> <h1 id="title">Flight Calculator</h1> <h3>Location</h3> <select id="location" onchange="getSelectValue();"> <option value="0">- Please Select -</option> <option value="70" id="doncaster">Doncaster/Sheffield</option> <option value="80" id="eastmids">East Midlands</option> <option value="90" id="gatwick">Gatwick</option> <option value="100" id="heathrow">Heathrow</option> <option value="110" id="bradford">Leeds/Bradford</option> <option value="115" id="manchester">Manchester</option> </select>

<h3>Destination</h3>
<select id="destination" onchange="getSelectValue2();">
    <option value="0">- Please Select -</option>
    <option value="120" id="france">France</option>
    <option value="130" id="germany">Germany</option>
    <option value="140" id="italy">Italy</option>
    <option value="200" id="mexico">Mexico</option>
    <option value="150" id="portugal">Portugal</option>
    <option value="160" id="spain">Spain</option>
    </select>

<h3>Adults</h3>
<select id="adults" onchange="getSelectValue3();">
    <option value="0" id="none">0</option>
    <option value="1" id="one">1</option>
    <option value="2" id="two">2</option>
    <option value="3" id="three">3</option>
    <option value4="4" id="four">4</option>
</select>

<h3>Children (£25.00 discount per child)</h3>
<select id="children" onchange="getSelectValue4();">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<h3>How will you be flyng with us?</h3>
<select id="flight" onchange="getSelectValue5()">
    <option value="0">- Please Select -</option>
    <option value="0">Economy</option>
    <option value="100">First Class (+ £100.00)</option>
    <option value="1500">Business Class (+ £1500.00)</option>
</select>

<!-- Extras -->

    <h3>Extra Legroom? (+ £10.00)</h3>
    <form>
        <input value="10" id="legroom" type="radio" name="legroom" onchange="legroomYes()"> Yes
        <input id="no-legroom" type="radio" name="legroom" value="0"onchange="legroomNo()"> No
    </form>

<h3>On Flight Meal? (+ £10.00)</h3>
    <form>
        <input value="10" id="flightmeal" type="radio" name="meal" onchange="mealYes()"> Yes
        <input id="no-meal" value="0" type="radio" name="meal" onchange="mealNo()"> No
    </form><br>

<!-- Total -->

<button id="calculate" onclick="total()">Calculate</button>

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

</body> </html>

Steven Parker
Steven Parker
243,266 Points

Use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:
Or watch this video on code formatting.

1 Answer

Steven Parker
Steven Parker
243,266 Points

It looks like you're getting close, and you already seem to have a good idea of what needs to be done yet.

Mostly, your "total" function needs to get all of the values from your controls (like your testing functions do) and then just add them up to produce the actual total (instead of the fixed 100).

Are you taking Treehouse courses and college at the same time? This looks very much like some of the example projects in the beginner Treehouse courses.

Hi Steven, I was taking some treehouse courses a while back (HTML & CSS) but had other studies so I had to put my Treehouse subscription on hold, Iv'e tried to just get the location and destination total by writing:

const totalCost = getSelectValue() + getSelectValue2(); and

const totalCost = selectedValue + selecedtValue2;

but none of them seem to work. Like you said I have a good understanding, I know what needs to be done, it's just how...

Steven Parker
Steven Parker
243,266 Points

Your select functions (like "getSelectValue2") currently only log the values to the console. To be able to use them in a formula they need to return the values instead of (or in addition to) logging them.

function getSelectValue2() {
    const selectedValue2 = document.getElementById('destination').value;
//  console.log(selectedValue2);  // optional
    return selectedValue2;        // return the value to the caller
}

Hi Steven. I've been playing around with things and returned the functions as you suggested. But it only seems to pull the option value from the first option in each list. It also doesn't add them together, it just puts them together. So when I click the calculate button it shows 'Your total flight cost is 00'.

/* Total Cost */

const totalCost = getSelectValue() + getSelectValue2();

function total(){ window.alert ("Your total flight cost is " + totalCost); }

/* Value Functions */

function getSelectValue(){ const selectedValue = document.getElementById('location').value; //console.log(selectedValue) return selectedValue; }

function getSelectValue2(){ const selectedValue2 = document.getElementById('destination').value; //console.log(selectedValue2) return selectedValue2; }

Steven Parker
Steven Parker
243,266 Points

Well, you can't perform the calculation when the program loads, because nothing has been selected yet. It has to be done inside the click handler:

function total() {
  const totalCost = getSelectValue() + getSelectValue2();
  window.alert("Your total flight cost is " + totalCost);
}

Thank you Steven! I'm almost there, I just need them to mathematically add together, instead of just being placed next to each other. I was told in college to look into parseInt but I cannot seem to get it to work. Sorry for being a pain aha. But I highly appreciate your help. Thanks again.

Steven Parker
Steven Parker
243,266 Points

I wonder where you placed the parseInt. One way to do it would be to use it when you return a value:

    return parseInt(selectedValue);

Thank you Steven. It's now functioning properly :) Now i've gotta figure out how to multiply the value by the amount of adults, minus £.25.00 for each child selected and add 10 if the meal and legroom radio buttons are selected yes...

Steven Parker
Steven Parker
243,266 Points

Now it's just plain math:

function total() {
  const totalCost = 
        // location + destination + class for each adult
        (getSelectValue() + getSelectValue2() + getSelectValue5()) * getSelectValue3()
        // location + destination + class - discount for each child
      + (getSelectValue() + getSelectValue2() + getSelectValue5() - 25) * getSelectValue4()
        // legroom for each passenger
      + legroom() * (getSelectValue3() + getSelectValue4())
        // meal for each passenger
      + meal() * (getSelectValue3() + getSelectValue4());
  window.alert("Your total flight cost is " + totalCost);
}

Note this relies on "legroom" and "meal" functions that will return either 10 or 0 based on the buttons. I'll leave those to you. :wink:

Thank you so much Steven!