Javascript show / hide elements

Question

1. I have a hidden text area (which is defined as hidden with bootstrap)
2. I have a dropdown which has 2 options.
3. If I select 1st option, textarea should be shown .
4. If I select 2nd option, textarea should disappear .

Here are my codes and I don't know where I go wrong :

function OnSelectedIndexChange(){

    var getDropDown = document.getElementById("myDropDownID");
    var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].text;

    if(getDropDownSelectedItemValue == 'Yes'){
        document.getElementById("myTextAreaID").style.display = 'block';
    }

    else{
        document.getElementById("myTextAreaID").style.display = 'none';
    }
}

UPDATE:

Added jsfiddle link : jsfiddle.net/wy562fk8/1 but i am using blade templating, so you can't be able to see any output.

Answer 1

Might be the reason you are doing

 var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].text;

instead of

 var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].value;

Answer 2

use onchange function.

document.getElementById("myDropDownID").onchange = function {
  if(document.getElementById("myDropDownID").value == 'Yes'){
        document.getElementById("myTextAreaID").style.display = 'block';
    }

    else{
        document.getElementById("myTextAreaID").style.display = 'none';
    }
}