CODEWITHSUNDEEP
javascripthtml
Corjava
Corjava

Reputation: 340

onchange not working for drop down menu?

I'm trying to make it so that when a selection is made from my dropdown menu, text will display accordingly inside my textarea, for now I've been trying to just get one of them to work.

PROBLEM: It won't display the string from the array inside the textarea. Is the problem within this code?

The drop down menu:

<select id="dropdown" onchange="getFrames();">
    <option value="1" selected="selected"> Blank </option>
    <option value="2"> Exercise </option>
    <option value="3"> Juggler </option>
    <option value="4"> Bike </option>
    <option value="5"> Dive </option>
</select>

The textarea :

<textarea id="textstage" rows="80" cols="20"> </textarea>

JavaScript :

I have these global variables.

var theStage = document.getElementById("textstage");
var getDrop = document.getElementById("dropdown");

and then I have this function.

function getFrames(){
    var dropSel = getDrop.options[getDrop.selectedIndex].value;

    if(dropSel === 2){
        theStage.value = ANIMATIONS["Exercise"];
}

The array being referenced is a global array from another js file.

Upvotes: 1

Views: 1019

Answers (2)

PSL
PSL

Reputation: 123739

Try:

var theStage,getDrop; 

function getFrames() {
    var dropSel = getDrop.options[getDrop.selectedIndex].innerHTML;//+getDrop.value;
    theStage.value = ANIMATIONS[dropSel];

}

//Place the selection part on load callback
window.onload = function () {
    theStage = document.getElementById("textstage");
    getDrop = document.getElementById("dropdown");
}

Demo

  • You can just use getDrop.value instead of doing getDrop.options[getDrop.selectedIndex].value.
  • === is strict equality comparison meaning "2" === 2 will be false as in your case.
  • Seems like you are looking for the option text to look up the value based on this as key in your object Animation. So you can just do getDrop.options[getDrop.selectedIndex].innerHTML
  • Your document selection code should be inside window.onload or after the element in the html

Upvotes: 3

itsmikem
itsmikem

Reputation: 2168

I made a minor change to your html by omitting the inline event handler, and instead added it to the javascript.

html:

<select id="dropdown">
    <option value="1" selected="selected"> Blank </option>
    <option value="2"> Exercise </option>
    <option value="3"> Juggler </option>
    <option value="4"> Bike </option>
    <option value="5"> Dive </option>
</select>
<textarea id="textstage" rows="80" cols="20"> </textarea>

Also, in the javascript, I took away the strict equality (===) and made it just (==).

javascript:

var theStage = document.getElementById("textstage");
var getDrop = document.getElementById("dropdown");
getDrop.addEventListener("change",getFrames);
function getFrames(){
   var dropSel = getDrop.options[getDrop.selectedIndex].value;
    if(dropSel == 2){
      theStage.value = ANIMATIONS["Exercise"];
    }
}

Hopefully it should work now for you.

Upvotes: 0

Related Questions