Declare a variable in a URL and assign it a value in Javascript when navigating to a page

Question

I'm relatively new to HTML (and programming in general), and I'm trying to declare a variable and assign it a value when I navigate to a page. What I have is a line of code like this:

function() navigate {window.location = "myPage.html?myVar=1";}

When I run the function, the new page will load, but whenever I try to access the variable, I get an error saying the variable is undefined. However, if I define the variable in the new page, for example <script>var myVar;</script>, the value is set to null rather than the value that I try to set it to in the navigate function I used earlier.

I can't think of any solution to this, and my error probably stems from my misconceptions about how the ? at the end of the url works, but I can't find a good explanation of how it works anywhere.

Answer 1

The query string variables are intended for passing data to the server when we request a page, however you could still access them using javascript, checkout this Stackoverflow question How can I get query string values in JavaScript?

Answer 2

The function is written incorrectly. Check your javascript console for errors. Here is am example of ways to write functions in javascript:

    var navigate = function() { window.location = "myPage.html?myVar=1"; }

OR

    function navigate() { window.location = "myPage.html?myVar=1"; }

I word of caution, the name navigate is too general. I would name it something like navigateToMyPage.

I reread the question and realized that you are looking for a way to get a parameter from the url.

You will want to do something like this:

    var navigateToMyPage = function() { window.location = "myPage.html?" + location.search; }

Here is a related question and solution: How to get the value from the GET parameters?

OR

If you want to pass a javascript variable value you could do this:

    var myVar = 1 + 1;
    var navigateToMyPage = function() { window.location = "myPage.html?myVar=" + myVar; }

Good luck!

Answer 3

The query string - on the client-side and on the server-side

The query string is not processed automatically into variables by Javascript, which is a client-side scripting language. This is usually done by server-side scripting languages, like PHP.

For example, on the server-side in PHP, you will usually have the query string values automatically assigned to the $_GET array, or $_GET['myVar'] in this case. But in Javascript this is not the case, and you will need to process the query string yourself.

The fragment identifier - passing URL values to Javascript

In Javascript, the most common way to pass values through the URL is actually through the fragment identifier and not through the query string.

For example, you can pass two variables like so:

myPage.html#myVar=1&myOtherVar=2

In JavaScript the location.hash variable will be automatically assigned the value #myVar=1&myOtherVar=2 which you can further process like this:

var location_vars = [];
var location_vars_temp = location.hash.replace('#',''); // Remove the hash sign
location_vars_temp     = location_vars_temp.split('&'); // Break down to key-value pairs
for (i=0; i < location_vars_temp.length; i++) {
    location_var_key_val = location_vars_temp[i].split('='); // Break down each pair
    location_vars[location_var_key_val[0]] = location_var_key_val[1];
}

At this point location_vars will be an array populated with the values passed, and you will be able to reference them with location_vars['myVar'] and location_vars['myOtherVar']