Variable Scope and .click Events

Question

Hi all,

I'm having trouble understanding the scope of variables when using a .click() function in jQuery. Here is a simple example where ('a') refers to any <a> link element. When a link is clicked, the myVar variable value should be changed from an empty string to "Hello World".

var myVar = " ";

$('a').click(function() {
     myVar = "Hello World";
});

var textToPrint = ("<p>" + myVar + "</p>");

document.write(textToPrint);

After I click on the link, only the empty string prints to the screen, which is the original value set for myVar as a global variable. Given previous courses on scope, I was thinking that after I click the link, "Hello World" should be printed. I read some other forums online and it seems that the .click() function reloads the page, resetting the "Hello World" value to the initial value (empty string).

I understand that I could fix this problem like this:

var myVar = " ";

$('a').click(function() {
     myVar = "Hello World";
     document.write("<p>" + myVar + "</p>")
});

But there are many circumstances where I want to declare a global variable, modify it's value within a .click() function, and then do something with the modified value later on. Can someone explain what's going on here and how it is typically dealt with? Many thanks!

-Ryan

Answer 1 · 2017-02-28T04:18:39Z

February 28, 2017 4:18am

Hey Ryan,

You got it all wrong; jQuery's click method does not reload anything. But, document.write does reload the page... hence why you wouldn't want to use it in any real app. Here's what's actually happening:

var myVar = "" // Here you create your variable

// Here you're assigning a handler (think: function) to the click event
// Basically, you're telling the browser to call this function whenever any anchor tag is clicked
// But remember, right now, all that is happening is you're **assigning** the handler...
// You're not actually calling anything... yet
$('a').click(function() {
     myVar = "Hello World";
})

// Here you shouldn't be using document.write
// Using document.write reloads the page and writes "<p></p>" to it
// Note that the content of myVar is still an empty string because we haven't clicked on any anchor tags
document.write("<p>" + myVar + "</p>")

So, basically, don't do it like that. Do it more like this:

// This is a more realistic example of when you would want to have a global variable...
// Though, really, you'd never want global variables, but that's another topic
var clickCount = 0

$('a').click(function() {
     // Increment the count
     clickCount += 1

     // Create your html string
     var text = "<p>You clicked this thing like " + clickCount + "times!</p>"     

    // Write the html string to the document's body
    // Usually, you wouldn't just write it to the body... because presumably your anchor tag is in the body...
   // And so doing so would overwrite your anchor tag
   // Instead, you'd grab some element by its classname or id and assign that this html string
    document.body.innerHTML = text
})

Welcome to the Treehouse Community

Looking to learn something new?

Ryan Forster

Ryan Forster

Variable Scope and .click Events

1 Answer

miikis

miikis