OpenLayers: how to turn on visibility of a layer?

Question

I can not understand what am I doing wrong ? I think I have written everything really well:

The HTML code goes like this:

    <b>&nbspSelect Area</b>
    <select id="mySelect_1" onchange="showSelectedArea();" > 
    <option selected disabled hidden value=''></option>"
    <option value="1">Center</option> 
    <option value="2">New jersey</option>
    </select>

and the Javascript is this:

    layer1.setVisibility(false);    
    layer2.setVisibility(false);    
    layer3.setVisibility(false);
    layer4.setVisibility(false);    

    }

    function showSelectedArea() {

    var e = document.getElementById("mySelect_1");
    var valueEpilogi_1 = e.options[e.selectedIndex].value;

    if (valueEpilogi_1 == "1") {
          layer3.setVisibility(true);   
    }

    }

I dont think the problem is with the if or passing the value,if I set true == true it still wont set visibility to true.I think there is a problem with triggering the function at the select tag.

Please check my external js file and tell me what is the problem?? I define all layers in init function which runs onbody load ??is tha thte problem? snk.to/f-cdh90xd4

Answer 1

You must read the value of the select try that :

var valueEpilogi_1 = document.getElementById('mySelect_1').value ;

edit : If you want use 'layer' outside of your init() function, it must be defined as global variable

example :

function init(){
/* this variable is global, declaration without  'var' before, so it can be used out of the function*/
perioxes = new OpenLayers.Layer.Vector("Polygon Layer");
...
map.addLayer(perioxes); 
..
perioxes.setVisibility(false); 
...
}

function showSelectedArea() {

var valueEpilogi_1 = document.getElementById('mySelect_1').value ;

if (valueEpilogi_1 == "1") {
layer.setVisibility(true);   
}

}