1

I have an HTML file test.html where I have two variables both named location, one global and one local. But when I open it in browser it just says Your file was not found, and the address bar shows file://Los%20Angeles instead of file://test.html as expected. Why?

<html>
<body>
<script type="text/javascript">
var location = "Los Angeles"
function showLocation() {
    var location = "San Francisco"
    document.write(location)
}
</script>
<input type="button" onclick="showLocation()" value="Show Location"/>
</body>
</html>
Sebastian Simon
  • 16,564
  • 7
  • 51
  • 69
Zhaowei Wu
  • 115
  • 2
  • 8

2 Answers2

3

'location' is a reserved keyword in javascript. Just change your variable name into something else. For more info about reserved words: https://www.w3schools.com/js/js_reserved.asp

Kavindra
  • 1,679
  • 2
  • 13
  • 19
  • 1
    Also since you've declared a variable outside a scope (global variable) if your goal is to modify the value, all you have to do is to just call the variable inside your function and just assign a new value to it, no need to declare it again. – jek Sep 04 '17 at 01:54
  • @jhek thanks. I was just trying to test the result of using the same name to declare a global var and a local var. – Zhaowei Wu Sep 04 '17 at 01:57
  • Thank you! I never thought about reserved keyword : ) – Zhaowei Wu Sep 04 '17 at 02:00
2

Setting the global location causes the browser to go to that url. It's not a reserved word — it's a variable defined on the window object. Here is a better list of reserved words:

https://docs.microsoft.com/en-us/scripting/javascript/reference/javascript-reserved-words

In your example, you are setting the global location to 'Los Angeles', which causes the window to navigate to that as if it was a relative URL.

Setting var location = "San Francisco" inside your function has no effect on the window object because function variables have their own scope.

So you could do this:

function showLocation() {
    var location = "San Francisco"
    document.write(location)
}

and it will work as expected. It will write the string 'San Francisco' to the document.

If you are on a modern browser you can see what's going on by trying so set 'location' with 'let':

let location = "los angeles"

Now you will get an error that says something like:

SyntaxError: Can't create duplicate variable that shadows a global property: 'location'

Mark
  • 84,957
  • 6
  • 91
  • 136
  • That link now redirects to an unrelated MDN article. It can still be viewed with the [Web Archive](https://web.archive.org/web/20180618200946/https://docs.microsoft.com/en-us/scripting/javascript/reference/javascript-reserved-words), but the issue is still entirely unrelated to reserved words. I’ve written [an answer](https://stackoverflow.com/a/51062916/4642212) to a related question that provides a complete list of variables that behave similarly. It’s not too easy to characterize these variables, but it’s basically non-configurable `Window.prototype` (and other) properties with setters. – Sebastian Simon Jun 02 '19 at 04:48