javascript get value onchange

Question

i am trying to get an select input value to show in div onchange but it seems to not work and i was just wondering if someone could help or knew why ?

function getData(dropdown) {
  var values = dropdown.options[dropdown.selectedIndex].value;
  var pop = Game.currentGame.ui.options.servers.values.population;
  var servers = document.getElementsByClassName('hud-intro-guide')[0];
  servers.textContent = "Server " + pop + " population"
}

<select class="hud-intro-server" onchange="getData(this);">
  <optgroup label="asia servers">
    <option value="v8617903">asia #1 </option>
    <option value="v8617895">asia #2 </option>
    <option value="v8617899">asia #3 </option>
    <option value="v8617900">asia #4 </option>
    <option value="v8617898">asia #5 </option>
    <option value="v8617894">asia #6 </option>
    <option value="v8617901">asia #7 </option>
    <option value="v8617902">asia #8 </option>
    <option value="v8617897">asia #9 </option>
  </optgroup>
</select>

<div class="hud-intro-guide"> </div>

Well, the error clearly states `Game is not defined`, so probably you are either missing something in your example, or you seem to have another problem. What does the debugger say (F12 on most browsers) when you are trying to change a value, or when your site loads? — Icepickle, Sep 29 '18 at 13:17
somewhat off topic but i think you should not name that function getData if it does not return anything. besides.. `Game` does not exist. — GottZ, Sep 29 '18 at 13:17
I am seeing the values, are you getting any errors in console? — kiranvj, Sep 29 '18 at 13:23
Possible duplicate of [Dynamically access object property using variable](https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) — JJJ, Sep 29 '18 at 16:24

score 1 · Accepted Answer · answered Sep 29 '18 at 13:25

1

var pop = Game.currentGame.ui.options.servers.values.population;

should be

var pop = Game.currentGame.ui.options.servers[values].population;

answered Sep 29 '18 at 13:25

kiranvj

32,342
7
71
76

1

Oh wow thank you so much you knew just want i was trying to do and works! – MaxHoper Sep 29 '18 at 13:27

score 1 · Answer 2 · answered Sep 29 '18 at 13:28

Probably your problem is about how you're trying to use the variable values.

  var pop = Game.currentGame.ui.options.servers.values.population;
                                                ^
                                                |
                                                +-- Here you're accessing the attribute values 
                                                    rather than getting the server related 
                                                    to the chosen option.

What you really want is the following:

function getData(dropdown) {
  var values = dropdown.options[dropdown.selectedIndex].value;
  var pop = Game.currentGame.ui.options.servers[values].population; 
                                                ^
                                                |
                                                +-- With this, you're getting the server.

  var servers = document.getElementsByClassName('hud-intro-guide')[0];
  servers.textContent = "Server " + pop + " population"
}

score -3 · Answer 3 · answered Sep 29 '18 at 13:19

-3

You do not need to add change event on the select tag. Just add change event on the select in the jquery function in document.ready event write as below:

$('#your select id').on('change', function() {  alert( this.value );});

OR

 $('.your select class').on('change', function() {  alert( this.value );});

answered Sep 29 '18 at 13:19

saumil_

304
2
11

That's not the problem the OP is facing. Even the OP doesn't know the problem s/he's facing. – Ele Sep 29 '18 at 13:21
1

Just a heads up, your code is using jQuery, the question don't have a jQuery tag a the OP code is plain JS. – kiranvj Sep 29 '18 at 13:29

javascript get value onchange

3 Answers3