Unable to update global variable in javascript/html function

Question

I have a defined global variable that I have tried to update a number of ways, but it does not work

<script>
var test = 4;

 function dostuff() {


...

test=7;
or
window.test=7;
or
declare it here without the var = 7

...

}
</script>

then later...

<td><script type="text/javascript">document.write(test);</script></td>

output: 4!

Any help? Help me make it say 7!

Thanks

dostuff() is called like this.

$(document).ready(function(){
    dostuff();
});

if I call it normally it does update the global variable correctly, but then other stuff in this program breaks. Any hint to update the global variable from within this $(document).ready(function()?

Thanks!

document.write(test) in that will be called when the document is loading. You'd be better to create a function to update the content of that table cell which can be called after updating the variable. — James Donnelly
– James Donnelly, Commented Feb 6, 2013 at 14:10

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

I am not sure where you are calling dostuff() function, but there is one thing which need to be consider, if you want variable test to be global for the page. Then you should declare it like this.

//this one is preferd
test = 4;

or

window.test = 4;

This should work, make sure you are calling dostuff().

Edit: Solving Function Call Problem

So here is complete solution with overview of your problem.

Problem: You are calling doStuff() in document.ready() (This got called after loading the DOM) event and you are printing the value of variable when DOM is loading.

It shows Old Value because doStuff() is never got called before you printing the value in DOM.

Solution: There are two ways to achieve the desired output.

Call doStuff() before starts loading (Right after its declaration).
Create a function, which do the calculation and return the value to be Print accordingly.

Solution 1:

 <!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
      <script>
//Should be before Body tag
       test = 4;
//Declaring function
    function doStuff()
    {
      
      test = 8;
      
    }
    //Calling right after declarion 
    doStuff();
      </script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    </head>
    <body>
/*Here value is updated and ready to print any any where in the DOM*/
      <h1><script type="text/javascript">
      
        document.write(test);</script></h1>
    </body>
    </html>

Live URL to Solution 1

Solution 2:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script>
    /*Should be before Body tag*/
   test = 4;
    
function doStuff()
{
  /*Changing value and returing it.*/
  test = 8;
  return test;
  
}

  </script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h1><script type="text/javascript">
    /*Calling function and printing returned value*/
    document.write(doStuff());</script></h1>
</body>
</html>

Live URL to Solution 2

Hope this will help, let me know if any thing else is there, if nothing Accpet as answer!!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 6, 2013 at 14:20

Ishan Dhingra

2,4625 gold badges32 silver badges43 bronze badges

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

4 Comments

Matthew Clarkson Over a year ago

dostuff() is called like this. $(document).ready(function(){ dostuff(); }); if I call it normally it does update the global variable correctly, but then other stuff in this program breaks. Any hint to update the global variable from within this $(document).ready(function()? Thanks!

Ishan Dhingra Over a year ago

@MatthewClarkson Just made an edit according to your problem!!

Matthew Clarkson Over a year ago

Hey, is there away to refresh the html portion of the DOM without relaoding the whole plage? Thanks!

Ishan Dhingra Over a year ago

There you have to use AJAX according to your needs.

Fabian Schmengler · Accepted Answer · 2013-02-06 14:23:44Z

1

Apparently, you're not calling your dostuff() function anywhere :)

edited Feb 6, 2013 at 14:23

Fabian Schmengler

24.6k9 gold badges82 silver badges114 bronze badges

answered Feb 6, 2013 at 14:08

Zathrus Writer

4,3315 gold badges30 silver badges53 bronze badges

Comments

Adam · Accepted Answer · 2013-02-06 14:23:59Z

Head tag scripts don't actually execute functions, they just define them. You have to execute the function with a function call from somewhere in the document. This function call can be attached to the page's onload event to make it execute automatically when the page is loaded, or it can be attached to some other event, like onclick, so you can trigger it later.

Declaring a global variable in the way that you did lacks descriptive power; when a global variable is declared, it is attached to the window object. Thus, when you declare one, declare it like so:

var window.varName = value;

While it does the exact same thing, it does help you to explicitly express what is actually going on, which is almost always better than the alternative.

Collectives™ on Stack Overflow

Unable to update global variable in javascript/html function

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related