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 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 2

查询字符串变量旨在在我们请求页面时将数据传递到服务器，但是您仍然可以使用javascript访问它们，请检查此Stackoverflow问题如何在JavaScript中获取查询字符串值？

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']