Why is a global variable undefined inside a function when I call it?

Question

This function redirects to a URL, but the course_syllabus_code part shows up as undefined after the URL. I don’t know why this happens.

Basically the user will be able to open the code and enter the variables (there will be multiple) at the top. Then further below is where all the magic is supposed to happen.

The structure of the variable being entered cannot change but maybe the “magic” isn’t being executed in the best way possible.

const course_syllabus_code = "72524";

function syllabusLink(course_syllabus_code){
  location.href = "https://example.com/" + course_syllabus_code;
}

<ul>
  <li>
    <a href="javascript:syllabusLink();">Syllabus</a>
  </li>
</ul>

You never pass in `course_syllabus_code` so it shows up as undefined because it is not present. — Travis J, Mar 09 '13 at 10:35
Please note that a construct like `href="javascript:syllabusLink();"` should never be used. See [Why is it bad practice to use links with the javascript: "protocol"?](/q/2479557/4642212). Instead, a proper, accessible fallback URL should be used in the `href` attribute while the `syllabusLink` function should be bound as an event listener via [`addEventListener`](//developer.mozilla.org/en/docs/Web/API/EventTarget/addEventListener). Since all the answers below reference this piece of code, it’s a bit of a hurdle to edit it out for the benefit of future readers. — Sebastian Simon, Nov 01 '22 at 12:08
Related: [Global variable is logged as undefined when passed as parameter to setTimeout callback function](/q/32326721/4642212). — Sebastian Simon, Dec 05 '22 at 08:32

T.J. Crowder · Accepted Answer · 2013-03-09T10:51:16.523

You're passing course_syllabus_code as an argument to the function, but calling the function without any arguments. When you call a function with fewer arguments than it defines, the ones that you don't pass come through with the value undefined. Since you've given the function argument the same name as the global, it "shadows" (obscures, hides) the global from the code in the function, which will access the argument instead.

You have three choices (only do one of these, not all of them):

Use the global by just removing the declared function argument:
```
function syllabusLink() {
// Removed here ------^
```

Or, pass the global into the function where you call it:

<a href="javascript:syllabusLink(course_syllabus_code)"><img src="CourseButton3.png" />Syllabus</a>

I'd probably change the name of the argument as well (here I've used scode):

function syllabusLink(scode) {
    location.href = 'https://foo.com'+scode;
}

Or, don't make course_syllabus_code a global at all, and pass it to the function:

<a href="javascript:syllabusLink('72524')"><img src="CourseButton3.png" />Syllabus</a>

I'd probably go for #3, unless there's a really good reason it has to be a global variable.

score 1 · Answer 2 · answered Mar 09 '13 at 10:36

Change the function argument since it's the same name as the local variable.

var course_syllabus_code = "72524";

function syllabusLink(code) {
    location.href = 'https://foo.com' + code;
}

You should pass course_syllabus_code to syllabusLink within the href attribute.

<a href="javascript:syllabusLink(course_syllabus_code)"><img src="CourseButton3.png" />Syllabus</a>

score 0 · Answer 3 · answered Mar 09 '13 at 10:34

Try like this

  var course_syllabus_code = "72524";

function syllabusLink() {
location.href = 'https://foo.com'+course_syllabus_code;
}

Because in onClick() you are not passing any parameter.

course_syllabus_code is global variable.You can access directly in the function.

score 0 · Answer 4 · answered Mar 09 '13 at 10:36

0

This bit is incorrect:

javascript:syllabusLink()

You are missing the parameter so calling the function

function syllabusLink(course_syllabus_code) {

The value of course_syllabus_code is not being set.

answered Mar 09 '13 at 10:36

Ed Heal

59,252
17
87
127

score 0 · Answer 5 · answered Mar 09 '13 at 10:43

Please never use the javascript: protocol except for bookmarklets.

The better code is this

<script type="text/javascript">

function syllabusLink(course_syllabus_code) {
   location.href = 'https://foo.com/course?syllabus='+course_syllabus_code;
   return false; // cancel link
}
</script>

<ul>
<li><a href="#" onclick="return syllabusLink('72524')"><img src="CourseButton3.png" />Syllabus</a></li>
</ul>

Or

this

<script type="text/javascript">
var course_syllabus_code="72524";

function syllabusLink() {
   location.href = 'https://foo.com/course?syllabus='+course_syllabus_code;
   return false; // cancel link
}
</script>

<ul>
<li><a href="#" onclick="return syllabusLink()"><img src="CourseButton3.png" />Syllabus</a></li>
</ul>

score 0 · Answer 6 · answered Mar 09 '13 at 10:46

Simple answer you need to pass course_syllabus_code as argument in function. just remove it from function argument and try.

<script type="text/javascript">
var course_syllabus_code = "72524";
function syllabusLink() {
    location.href = 'https://foo.com'+course_syllabus_code;
}
</script>

And the reason is course_syllabus_code is global variable .You can access directly in the function.

Why is a global variable undefined inside a function when I call it?

6 Answers6

Linked