How to Return a value with a Change Function

JavaScript
1

I have some radio buttons on my page, and I need the value of a variable to change depending on what radio button is selected. I’m not sure how to return the new value so I can use it outside of the change function. Thanks for any help.


$jq('.some-radios').change(function(){
  if($jq('input[name=choose-radio]:checked')){
    var currentID = $jq('input[name=choose-radio]:checked').val();
    return currentID;
  }
});
console.log(currentID);
2

Have you looked at the examples from the jQuery docs? There’s an example using a select element with many options that you should be able to modify to handle radio buttons.

http://api.jquery.com/change/

3

That’s a good example there, but I’m not sure I understand how to access the changed variables outside of the change function.

I want to use the change function to change the value of a variable, but I need to use the new value in other parts of my code that I don’t want to have to include inside the change function.

4

Then you would want to place those other parts of your code in to their own functions, so that they can also be called from then change function.

5

Thanks, Paul. That’s what I did, and it worked just fine. :slight_smile:

6

UPDATE:

Ok, so that does work. I can get the changed value and use it by calling other functions. However, what I’m working on still isn’t working. I think it might be a different problem. If anyone is willing to assist and is up for the challenge, I would be very appreciative.

I’m using the Google JS API to create map analytics with a heatmap layer, and my data is stored in a local JSON file. There are various options for users to change the data in the map, so I’m trying to get radio buttons to switch out all of the map data to a different section of the JSON file. Here’s an image to help you visualize: http://codeswallow.com/map.png


function loadNewMapData(){
  //remove data from arrays
  locationLats = [];
  locationLngs = [];
  locationMarkers = [];

  [COLOR="#006400"]console.log(currentMapID);[/COLOR]

  var locationStoreLocation = new google.maps.LatLng(jsonData.Maps.Locations[0][[COLOR="#008000"]currentMapID[/COLOR]].Store.Latitude, jsonData.Maps.Locations[0][currentMapID].Store.Longitude);

  //insert new data
  for(var i = 0; i < jsonData.Maps.Locations[0][currentMapID][whichMap].length; i++){
    locationLats.push(parseFloat(jsonData.Maps.Locations[0][currentMapID][whichMap][i].Latitude));
    locationLngs.push(parseFloat(jsonData.Maps.Locations[0][currentMapID][whichMap][i].Longitude));
    locationMarkers.push(new google.maps.LatLng(locationLats[i], locationLngs[i]));
  }
  initialize();
}//end loadNewMapData()

//Radio Btns
//if change, get new value
$jq('.map-radio').change(function(){
  //if val != all, run map with that ID to get that specific JSON data
  if($jq('input[name=choose-map-location]:checked').val() != 'all'){
    //change value depending on radio btn value
    currentMapID = $jq('input[name=choose-map-location]:checked').val();

    //Choose Map Btns
      //auto load views data
      whichMap = "Views";
      loadNewMapData();

      $jq('.choose-map-group').change(function(){
        if($jq('input[name=choose-map]:checked').val()=='views'){
          whichMap = "Views";
          loadNewMapData();
        } else if($jq('input[name=choose-map]:checked').val()=='clicks') {
          whichMap = "Clicks";
          loadNewMapData();
        }
      });
  }//end if != 'all'
})
.change();

function initialize(){
  var mapOptions = {
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: locationStoreLocation
  };
  locationMap = new google.maps.Map(document.getElementById("locationMap"), mapOptions);
  locationPointArray = new google.maps.MVCArray(locationMarkers);
  heatmap = new google.maps.visualization.HeatmapLayer({
    data: locationPointArray
  });
  heatmap.setMap(locationMap);
  heatmap.setOptions({
    opacity: .5
  });

  var i = 0;
  var latlngbounds = new google.maps.LatLngBounds();
  for (var i; i<locationMarkers.length; i++){
    latlngbounds.extend(locationMarkers[i]);
  }
  locationMap.fitBounds(latlngbounds);
}//end initialize()

Basically, currentMapID gets the value of the selected radio button, which corresponds to keys in the JSON file. Upon load, the first radio button is automatically selected, and the map loads correctly. When I try to switch to a different radio button, though, I get “Cannot read property ‘Store’ of undefined” in my browser’s console. I think that means that the part in green above is what isn’t working. The console.log does return the changed radio button value. My guess is that it either isn’t working with the JSON file (JSONLint says it’s valid) or the map just isn’t being initialized again.

Again, any help would be very appreciated. I’m new to programming, so I’m really stuck on this. Let me know if you need any more info or code to assist. Thanks for taking a look.