Question

I have a small map and I want to show two different information categories on it separately. I have put two radio buttons on my code which allows users to select one of these category names and when a user move a mouse over a map the information which are related to the specific radio button should be appeared. my below code works only for first radio button and when I choose the second radio button again the first information are shown! can you help me what should I do? meanwhile the structure of my code works but I can’t write all of them here.

Here is my code:
the information is store in the below matrix:

var myCantons = [];
myCantons[0]=[name,year,population,density,year,population,density];
myCantons[1]=[x,1982,1200000,1.2,1992,300000,1.8];
myCantons[2]=[y,1982,5000000,4,1992,390000,4.6];

The radio buttons are:

<form action="">
   <input type="radio" name="againcies" value="SP" 
     "onchange="myShowValues(myEvent)"/>
   <input type="radio" name="againcies" value="Moody"            
     "onchange="myShowValues(myEvent)"/>

The function is:

function myShowValues(myEvent,detaset){
  if(dataset==1){
    document.getElementById('myLegCantName').firstChild.data =  myCantons[Id][0];
    document.getElementById('year').firstChild.data = myCantons[Id][1];
    document.getElementById('myLegCantVal').firstChild.data =(myCantons[Id][2]);
    document.getElementById('myLegCantVal2').firstChild.data =(myCantons[Id][3]);
  } else {
    document.getElementById('myLegCantName').firstChild.data = myCantons[Id][0]      
    document.getElementById('myLegCantRate').firstChild.data = myCantons[Id][4];
    document.getElementById('myLegCantVal').firstChild.data =(myCantons[Id][5]);                      
    document.getElementById('myLegCantVal2').firstChild.data =(myCantons[myScrId][6]);
  }
}

The map includes of lots of polygon which are in one group like this:

<g id="myCantons" fill="#A0C544" stroke="#FFFFFF" onmouseover="myShowValues(evt,dataset)">

My problem as mentioned before is in if condition part it can call only for first radio button and I am not able to apply if condition for second button, do you have any idea?

Answer 1

Try doing something like this :

<input type="radio" name="againcies" value="SP" 
 onchange="changeDataset(1)"/>
<input type="radio" name="againcies" value="Moody"            
 onchange="changeDataset(2)"/>

and

<g id="myCantons" fill="#A0C544" stroke="#FFFFFF" onmouseover="myShowValues()">

Then javascript like this :

var dataset = 1; // default value
function changeDataset(newval) {
   dataset = newval;
   // plus whatever else you need to do here
   // maybe myShowValues(); ???
}

function myShowValues(){
  if(dataset == 1){
     document.getElementById('myLegCantName').firstChild.data =  myCantons[Id][0];
     document.getElementById('year').firstChild.data = myCantons[Id][1];
     document.getElementById('myLegCantVal').firstChild.data =(myCantons[Id][2]);
     document.getElementById('myLegCantVal2').firstChild.data =(myCantons[Id][3]);
  } else {
     document.getElementById('myLegCantName').firstChild.data = myCantons[Id][0]      
     document.getElementById('myLegCantRate').firstChild.data = myCantons[Id][4];
     document.getElementById('myLegCantVal').firstChild.data =(myCantons[Id][5]);                      
     document.getElementById('myLegCantVal2').firstChild.data =(myCantons[myScrId][6]);
  }
}

A couple of things to note .. this isnt valid HTML :

"onchange="myShowValues(myEvent)"

there are too many quotes …