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
Joshua Comrie
3,861 PointsNeed 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!
Joshua Comrie
3,861 Points<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
243,266 PointsUse the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area.
Or watch this video on code formatting.
1 Answer
Steven Parker
243,266 PointsIt 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.
Joshua Comrie
3,861 PointsHi 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
243,266 PointsYour 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
}
Joshua Comrie
3,861 PointsHi 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
243,266 PointsWell, 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);
}
Joshua Comrie
3,861 PointsThank 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
243,266 PointsI wonder where you placed the parseInt. One way to do it would be to use it when you return a value:
return parseInt(selectedValue);
Joshua Comrie
3,861 PointsThank 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
243,266 PointsNow 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.
Joshua Comrie
3,861 PointsThank you so much Steven!
Joshua Comrie
3,861 PointsJoshua Comrie
3,861 Points/* 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) }