JavaScript if statement trouble

Question

My javascript is suppose to add value to a price variable and then return the price, my trouble is that i am using a select option and when i have more than one the price will only use the id of the last if statement, here is my HTML;

<form>
    <select>
    <option name ="Bristol "value="40.0" id ="BN1">Bristol - Newcastle</option>
    <option name ="London "value="35.0" id ="BL1">Bristol - London</option>
    </select>
    <button type="button" onclick="BookingFare(); return false;">Submit</button><br>
    </form>
    <label id='priceBox'></label>

and here is my Javascript

function BookingFare() {
        var price = 0;
        //var ofAdults = getElementById('adults').value;
        //var ofChildren = getElementById('children').value;
        var BN1 = document.getElementById('BN1').value;
        var BL1 = document.getElementById('BL1').value;

        if (BL1) {
         var price = BL1;
        }
        if (BN1) {
         var price = BN1; 
        }
        document.getElementById('priceBox').innerHTML = price;
        }

So basically the program will return the price of BN1, even if i choose Bristol - London. Any suggestions appreciated.

Your code doesn't check to see which of the options is actually selected. You can tell that by checking the "selected" property of the DOM nodes you've fetched. — Pointy, Mar 04 '15 at 21:56
Unless your option elements need IDs, ditch them, and grab the value of the select instead (give that an ID if needed). — j08691, Mar 04 '15 at 21:57

score 3 · Accepted Answer · edited May 23 '17 at 10:09

3

The result makes sense. The check inside your ifs is truey in both cases (probably because both BL1, BN1 exist).

What you need to do in your code is retrieve the selected index and then use it.

Give an id to your dropdown list:

<select id="dropdownList">
....

And then use it in your code to retrieve the selected value:

var dropdownList = document.getElementById("dropdownList");
var price = dropdownList.options[dropdownList.selectedIndex].value;
//rest of code

Take a look on a similar question here. You can also find a relative tutorial here.

edited May 23 '17 at 10:09

Community

1
1

answered Mar 04 '15 at 21:58

Nick Louloudakis

5,856
4
41
54

This explains what is happening but does not help in solving the question at hand. – 000 Mar 04 '15 at 21:59
Give me a minute to complete my thought. – Nick Louloudakis Mar 04 '15 at 22:00
Oh so you're one of these people: http://meta.stackexchange.com/questions/9731/fastest-gun-in-the-west-problem – 000 Mar 04 '15 at 22:01
Also, a tutorial: http://www.javascript-coder.com/javascript-form/javascript-get-select.phtml – pmac89 Mar 04 '15 at 22:05
@JoeFrambach Still learning SO, but the point is I am trying to find a balance between being fast but post good quality answers. Sorry for this, it indeed contained no clue to the answer which is unacceptable. – Nick Louloudakis Mar 04 '15 at 22:06
Thankyou very much it has worked, and also thankyou for the relative links to further help! – alexyz Mar 04 '15 at 22:16

dsuess · Answer 2 · 2015-03-04T22:03:54.450

1st: You are defining the variable price multiple times. 2nd: Your code checks for 'value' and of cause, it always has a value. I guess, what you really want to check is, whether an option is selected or not annd then use its value.

function BookingFare() {
  var price = 0;
  var BN1 = document.getElementById('BN1');
  var BL1 = document.getElementById('BL1');

  if (BL1.selected) {
    price = BL1.value;
  }
  if (BN1.selected) {
    price = BN1.value;
  }
  document.getElementById('priceBox').innerHTML = price;
}

<form>
  <select>
    <option name="Bristol " value="40.0" id="BN1">Bristol - Newcastle</option>
    <option name="London " value="35.0" id="BL1">Bristol - London</option>
  </select>
  <button type="button" onclick="BookingFare(); return false;">Submit</button>
  <br>
  <label id='priceBox'></label>
</form>

score 0 · Answer 3 · answered Mar 04 '15 at 22:02

I think this is what you are looking for.

<script>
    function BookingFare() {
        var price = 0;
        //var ofAdults = getElementById('adults').value;
        //var ofChildren = getElementById('children').value;
        var bristol = document.getElementById('bristol').value;
        console.log(bristol);
        if (bristol == 35.0) {
         var price = bristol;
        }
        if (bristol == 40.0) {
         var price = bristol; 
        }
        document.getElementById('priceBox').innerHTML = price;
}
</script>
<form>
    <select id="bristol">
    <option name ="Bristol "value="40.0" id ="BN1">Bristol - Newcastle</option>
    <option name ="London "value="35.0" id ="BL1">Bristol - London</option>
    </select>
    <button type="button" onclick="BookingFare(); return false;">Submit</button>
</form>
<label id='priceBox'></label>

JavaScript if statement trouble

3 Answers3