Javascript and JQuery Dom Global Variable Scope

Question

I have problem with scope of the variable in the code

var ButtonPressed; //global SCOPE
$(document).ready(function()
{

  function messageAlert()
  {
    $('#buttons').append('<input type="button" id="btn" value="Clickme" />');
    return false;
  }

  messageAlert();

  $('#btn').on("click", function()
  {
    ButtonPressed = 1;
  });
}); //end document

//// UNDEFINED NOT WORKING
if (ButtonPressed === 1)
{
  alert(ButtonPressed);
}

I try everything about scope tutorials but I can't show variable ButtonPressed=1 GLOBAL.

Any help ?

Is that if statement actually located after the $(document).ready() statement? In this case it will never show the alert, as this code will always be run before the button is actually clicked. — mikeyq6
– mikeyq6, Commented Mar 18, 2016 at 11:01
just assign default value to ButtonPressed variable like: var ButtonPressed = 0; — Ranish Karim
– Ranish Karim, Commented Mar 18, 2016 at 11:11

KAD · Accepted Answer · 2016-03-18 11:07:28Z

2

You are binding a click event to the button #btn to set the global variable ButtonPressed which will not be fired unless you click the button.

When your code executes and reaches the block (which is in the global scope) knowing that the button have not been clicked

if (ButtonPressed === 1)
{
  alert(ButtonPressed);
}

The variable ButtonPressed will not be set because you haven't clicked the button so it will not alert any message.

In other words, the if statement runs before the click handler

edited Mar 18, 2016 at 11:07

answered Mar 18, 2016 at 11:02

KAD

11.2k4 gold badges34 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajshekar Reddy · Accepted Answer · 2016-03-18 11:19:09Z

0

Explaining your code. the execution goes this way ( 1 ) --> ( 2 ) --> ( 3 )

    var ButtonPressed; // executed as soon as the script tag is hit -- ( 1 )

    $(document).ready(function()
    {
     //......          //executed ONLY AFTER the DOM is ready - (3 )
    }); 


    if (ButtonPressed === 1) //executed as soon as the script tag is hit - ( 2 )
    { 
      alert(ButtonPressed);
    }

as the comments indicate, the var ButtonPressed is executed first, then the execution skips to the if check . Only after the DOM is completely ready then your code block inside the $(document).ready will execute.

So that means all the global scope code stuff will get executed first and then the one's inside the document ready

1) If your intention is to Show a alert when ever a button is clicked then do this

$('#btn').on("click", function()
  {
    ButtonPressed = 1;
    alert(ButtonPressed);
    // do all the stuff that should happen when a button is clicked
  });

2) Else if your intention is to Check if a button was clicked?? then you can make use of the setInterval. using this you can check if a button was clicked or not for every say 1 secs. Like below.

var checkButtonStatus = setInterval(function(){
                 if (ButtonPressed === 1)
                 { 
                  alert(ButtonPressed);
                  //do all your stuff as the button was clicked
                  clearInterval(checkButtonStatus ); // remove interval as you don't need to check again.
                 }

                }, 1000);

Note: I would say option 2 is not efficient way of doing it, Go for option 1

edited Mar 18, 2016 at 11:19

answered Mar 18, 2016 at 11:07

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

2 Comments

putvande Over a year ago

How is this different to what KAD has explained in his answer?

Rajshekar Reddy Over a year ago

The way its being explained, I donot think a newbie will be able to understand better with KAD's answer, It sounds little high level. So I am explaining as low as possible

Collectives™ on Stack Overflow

Javascript and JQuery Dom Global Variable Scope

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related