使用查询字符串时将变量传递给函数不起作用

Question

EDIT:

I was trying to pass a reference to an object to another file. The answer seems to be to keep everything in one file and use different modals for different views.

---

What works:

I'm passing an object to a function via an onClick event and everything works fine.

$('.senator2016').on("click", function(){
    $('.navSecondary .yr').removeClass("highlight");
    $(this).addClass("highlight");
    countyInfo(elections.election2016senator);
}); 

Now, I'm trying to send the same data to a new page. I put the key information into a query string, parse it and send it to the function but ... it doesn't work.

When clicking on a link on the first page I pass a query string to the second page and then parse it

    var getElection;
    getElection = window.location.href;
    getElection = getElection.split("?")[1];

and then send it to the function

    console.log(getElection);
    countyInfo(getElection);

The first line on the console panel is this console.log (it's from state2-large.html)

    function countyInfo(selected_race){
          console.log(selected_race);
          var getYear   =   selected_race.electionDetails.year;
          var getOffice =   selected_race.electionDetails.office;

The above variables (getYear and getOffice) are getting information from the following object:

var elections={
  election2016senator:{
    electionDetails:{
        year:2016,
        office:"Senator",
        caption:"2016 Senatorial Candidates"
    },  

The console panel below shows the two console.log calls Notice they are strings. The error msg shows that the function was unable to read year in the getYear variable.

And below that is what is passed when I send the information via the onClick event (shown above) it sends an object.

Image below show the console.logs,
then the error
then what the onClick event sends

Answer 1

selected_race is still a string at this point. Try countyInfo(elections[getElection]) to actually access the object.