我不明白为什么我的全局变量没有更新？

Question

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.

Answer 1

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.

Answer 2

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);
}