0

I posted about this yesterday but I am still dumbfounded. I can't seem to figure out this problem. I want to update the parkEndpoint URL with a new value for the stateName variable when the user clicks on a state SVG. It keeps coming up as the original value in line 1.

I have tried looking in the console and after the function getStateName runs it does update the stateName variable, but when I console log the parkEndpoint variable after that function has run, it still shows the old variable, which I just set to nothing. 

var stateName = "";
const alertEndpoint = ("https://developer.nps.gov/api/v1/alerts? 
&limit=400&api_key=" + apikey );
var parkEndpoint = ("https://developer.nps.gov/api/v1/parks? 
stateCode=" + stateName + "&limit=100&api_key=" + apikey);

const elements = document.querySelectorAll('path');
console.log(elements);

// add event listeners
elements.forEach(function(el) {
  el.addEventListener("click",  getStateName);

});


   function getStateName(nodeList){
   stateName = nodeList.path[0].id;
   outputStateName(stateName);

 }

   function outputStateName(stateName) {
   console.log(stateName);
   console.log(parkEndpoint);
  }

I just want it to update the stateName variable in the URL.

Scott Caudle
  • 29
  • 4
  • 3
    I don't see where you are passing `nodeList` to `getStateName` function. Shouldn't you be doing `el.addEventListener("click", getStateName(elements));` – Ryan Wilson May 06 '19 at 12:43
  • What happens when you console.log( nodeList.path[0].id ); inside getStateName() ? – ow3n May 06 '19 at 12:43
  • 1
    because once the string is evaluated it is done. It does not keep updating.... – epascarello May 06 '19 at 12:44
  • Won't affect your logic, but it's not normal to set the value of a variable within a get function. Setters are for setting, getters are for getting, following standard practice will help you. – Alicia Sykes May 06 '19 at 12:45
  • Why no change the `parkEndpoint` a function and the stateName as param? – Radonirina Maminiaina May 06 '19 at 12:45
  • parkEndpoint is assgined value before the getStateName function is called. Therefore the value value of statename in parkEndpoint will be empty. If initialized in outputStateName() function and checked, it will be proper – AKSHAY V MADALGI May 06 '19 at 12:45
  • Possible duplicate of https://stackoverflow.com/questions/12024483/how-to-pass-parameter-to-function-using-in-addeventlistener – Paul May 06 '19 at 12:47

2 Answers2

0

It's because you don't update the value of parkEndpoint

In javascript, string are stored by reference. Meaning parkEndpoint references to the string defined L3, and is not reassigned later.

You need to reassign it in your getStateName function.

Bernard Pagoaga
  • 1,328
  • 1
  • 11
  • 17
0

Your statName variable is empty in the beginning and even after you are getting the state name from stateName = nodeList.path[0].id; the variable parkEndpoint is never being updated.

var stateName = '';
var parkEndpoint = parkEndpointUpdate();

function parkEndpointUpdate(){
   return `https://developer.nps.gov/api/v1/parks?
   stateCode=${stateName}&limit=100&api_key=${apikey}`
}

function getStateName(){
   stateName = nodeList.path[0].id;
   parkEndpoint = parkEndpointUpdate(); // This func will updated your variable of parkEndPont
   outputStateName(stateName);
}
Atish Shakya
  • 551
  • 6
  • 14