How to get selected value from dropdown in Javascript

Question

Now, before you tell me that this is an over-asked question, I already tried looking at multiple versions of this question, and when I tried their solutions, none of them work for me. So I'm going to try to get direct help.

Anyways, I have a dropdown list that contains U.S states that each correspond to an energy cost. I am trying to make it so that when the user selects a state, the Javascript code detects the change, finds the value of the selected option, and sets a variable (declared in a switch statement) based upon that selection.

However, the problem is, no matter what I do, it does not work. I don't know if I'm misspelling something, or I need to write a certain thing that I don't know about, but no matter what I'm doing wrong, it does not work.

Here's the HTML:

<div class="question">
      <p><b>In which U.S. state are you currently living in?</b></p>
      <select id="stateselect">
        <option value="choose" selected="selected">[none]</option>
        <option value="al">Alabama</option>
        <option value="ak">Alaska</option>
        <option value="az">Arizona</option>
        <option value="ar">Arkansas</option>
        /* Removed most of the options for sake of space*/
      </select>
    </div>

And the Javascript:

var energyCost;
var state = document.GetElementById('stateselect');
function getEnergyCost() {
  switch (state.value) {
    case 'choose':
      energyCost = 0.00;
      break;
    case 'al':
      energyCost = 0.13;
      break;
    case 'ak':
      energyCost = 0.21;
      break;
    case 'az':
      energyCost = 0.12;
      break;
    case 'ar':
      energyCost = 0.10;
      break;
   /* Ditto */
  }
}
state.addEventListener('change', getEnergyCost, false);

Would someone mind giving me some assistance with this? Thanks!

Note: I need the answers in plain Javascript, not jQuery.

Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — J J B, Nov 19 '17 at 00:44

score 1 · Accepted Answer · answered Nov 18 '17 at 23:35

1

You have a simple typo. It's getElementById, not GetElementById.

answered Nov 18 '17 at 23:35

jhpratt

6,841
16
40
50

How could I have not seen that?! Oh well, thank you and @JackRogers for answering! – Dreadnought Nov 18 '17 at 23:53

score 0 · Answer 2 · answered Nov 18 '17 at 23:35

0

You need to Change

var state = document.GetElementById('stateselect');

To

var state = document.getElementById('stateselect');

The capital on get in getElementById makes it an invalid function.

answered Nov 18 '17 at 23:35

Jack

649
7
22

How to get selected value from dropdown in Javascript

2 Answers2