Changing the value of global javascript variables

[Guest]

I'm having trouble finding out how to change the value of a javascript global variable from within another javascript function. Here's what I've been doing so far.

1/ I set the value in the header as follows:

<script type="text/javascript">
    var style = 0;
</script>

2/ I have a function in the header which I want to use to change the value of the global variable

  <script type="text/javascript"> 
function updateStyle(x){
  if (x==1) {  style = 1; }
  if (x==2) {  style = 2; }
if (x==3) {  style = 3; }
if (x==4) {  style = 4; }
alert("style is: " + style);

}
</script>

3/ Then I call the function using onclick.

onclick="updateStyle(1)"

I can see from the 'alert' in the function that the function is being accessed and the value of 'style' within the function is being altered, but it doesn't seem to be the global variable that is being altered. Presumably it is a local version.

The aim is to be able to use the gobal variable's value in the body of the page, but when I examine it, it is always the value set when the global was initialised (ie it is always 0).

At this stage, the code in the body is simply an alert to see what the value is:

   <script type="text/javascript">
        alert("style is: " + style);

  </script>
    

Any ideas?

Richard

[David_Powers]

At this stage, the code in the body is simply an alert to see what the value is:

   <script type="text/javascript">
        alert("style is: " + style);

  </script>

The value of style won't change until you have clicked an element that triggers updateStyle().

[Guest]

David,

Doesn't the onclick event do this, i,e onclick="updateStyle(1)".

This is what starts the process off. I use onclick to call updateStyle which (is supposed to) updates the global variable, which I then use later in the body of the page.

If I put an alert into updateStyle to show when it is called, then I can see that this alert is called.

[David_Powers]

Yes, but the alert that you put into the body of the page is triggered before you hit onclick.

[Guest]

I see. How would I get the body code to trigger?

As part of the onclick I put a call to window.location.reload(); thinking that this would cause the body code to run, but obviously this isn't working.

[David_Powers]

Without knowing what it is you're trying to do, it's difficult to offer any advice. I also hasten to add that my knowledge of JavaScript is limited. I can get things done, but lay no claims to being an expert. Although your question isn't related to Spry, you might have better luck in the Spry forum (http://forums.adobe.com/community/adobe_labs/spry_framework_ajax_prelease). That's where the JavaScript hardballs hang out.

[Guest]

I can see what is happening now. I call the function via onclick to update the global varable and this is working fine, but when the page is reloaded, the variable is reset. In effect I am trying to set a varable which can retain its value when the page is reloaded.

If you've any ideas that would be helpful. If not, thanks for your help to date and I'll try the Spry forum as suggested.

[David_Powers]

The only way I know to persist the value of a variable when a page is reloaded is to use a cookie or a server-side session variable.

[Guest]

Thanks for that. I've been trying out session variable. Here's what I've tried.

Declaring the session variable in the header:

<?php
session_start();
$_SESSION['style']=0;
?>

Trying to update the session variable from several onclick events in the body, while also called a reload of the page:

onclick="<?php $_SESSION['style']=1; ?>; window.location.reload();

onclick="<?php $_SESSION['style']=2; ?>; window.location.reload();

onclick="<?php $_SESSION['style']=3; ?>; window.location.reload();

The accessing the variable in the body:

      <?php
echo "Style value is:". $_SESSION['style'];
?>

However, I can't seem to change the value of the session variable. Currently it is stuck at the value it took when I first ran the code (1).

[David_Powers]

Yes, of course it is. You're running into exactly the same problem as before. Each time the page is reloaded, you're resetting the variable to its original value. You need to make sure the session variable doesn't exist before setting it to zero.

<?php
session_start();
if (!isset($_SESSION['style'])) {
  $_SESSION['style']=0;
}
?>

Now your session variable will retain its previous value and be set to zero only if it doesn't already exist.

[Guest]

I think I've worked it out. I have 4 onclick events in the code. Each one includes a bit of php code to reset the session variable.

onclick="<?php $_SESSION['style']=1; ?>; window.location.reload();"

onclick="<?php $_SESSION['style']=2; ?>; window.location.reload();"

onclick="<?php $_SESSION['style']=3; ?>; window.location.reload();"

onclick="<?php $_SESSION['style']=4; ?>; window.location.reload();"

I worked out that the session variable always took the value set in the last onclick event. I checked this by reordering the onclick events, and it was always the last value that was retained. It looks as if you can't embed php in onclick, so I assume that the php code was just being fired off in order every time the page was reloaded.

I've now got round the problem by accessing the value of a cookie that was being used in a bit of javascript elsewhere in the code.

Thanks for the help. I've learned some useful stuff.

[David_Powers]

Sorry, but that code is complete nonsense. PHP is a server-side language. JavaScript is client-side. The following code does nothing:

onclick="<?php $_SESSION['style']=1; ?>; window.location.reload();"

Load your page into a browser, right-click, and view source code. All that will be there is this:

onclick="window.location.reload();"

Because PHP is server-side, all that's happening is that the value of $_SESSION['style'] is being updated to whichever is the final value declared on the page.