homepage Welcome to WebmasterWorld Guest from 54.226.230.76
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
scope and onclick
struggling with scope for a local variable on an event
gleddy




msg:3599045
 11:15 pm on Mar 12, 2008 (gmt 0)

A quick demo of my problem is below, I am basically trying to change the value if the global variable when I submit / click a form button.

I can't seem to get the two variables to communicate as the local variable does not influence the global. I think it may have something to do with the event scope?

code:
==
function g() {
var start = false;
var form = document.getElementById("set");
form.onclick = function() {
start = true;
alert("local var = " + start);
}
alert("global var = " + start);
}

window.onload = g;

thanks for any advice!

<form id="set">
<input type="submit" value="Start" id="submit" />
</form>

 

daveVk




msg:3599207
 4:15 am on Mar 13, 2008 (gmt 0)

function g() {
var start = false;
var form = document.getElementById("set");
form.onclick = function() {
start = true;
alert("local var = " + start);
}
alert("global var = " + start);
}

The red statement defines "start" within function g it is not a global variable, it has a life for the short period the function executes, ie setting up the onclick handler.

In short move the red line external to all functions to make it global.

gleddy




msg:3599217
 4:30 am on Mar 13, 2008 (gmt 0)

thanks for the reply.

I moved the red line out of the function completely, but I still have a problem changing it. I can't seem to access it still, same as previous.

I get the theory, but my tests / implementation are failing I think.

fside




msg:3599245
 5:20 am on Mar 13, 2008 (gmt 0)

Difficult to know what you're aiming at, here. Are you trying to modify the variable, start, in g, by adding/subtracting, etc, using a value in some unstated textbox in the form named, "set"? This is how you might do that:

<body>

<form id="set">
<input type="text" id="txtset">
<input type="submit" value="start" id="submit" />
</form>

<script>
var g = function() {
var start = 12;

document.getElementById("set").onclick = function() {
nT = parseFloat(this.txtset.value);
start += isNaN(nT) ? 0 : nT;
alert("glob: " +start);
}
}();

</script>
</body>

Is that what you're trying to do?

gleddy




msg:3599246
 5:29 am on Mar 13, 2008 (gmt 0)

interesting... I don't think that is what I am trying to achieve.

What I provided originally is a stripped back version of a countdown timer I am trying to code. So the Global var of start = false was to keep the counter from being starting when the page loaded.

The onclick event, should convert the global var "start" to true, which would then activate the timer.

So I am trying to get my head around changing a global variable (essentially starting/stopping the timer) from an event such as onsubmit, or onclick.

thanks for the replies so far by the way :-)

daveVk




msg:3599270
 6:10 am on Mar 13, 2008 (gmt 0)

The 2 alerts shown do not prove much.

alert("global var = " + start);

will always show false.

try

form.onclick = function() {
alert("start = " + start);
start = ! start;
}

value should toggle each click

fside




msg:3599700
 4:59 pm on Mar 13, 2008 (gmt 0)

> activate the timer <

You have to 'show your work', as it were. You need to post the whole thing. It's like trying to diagnose engine problems over the phone for a Camaro when the customer might not even realize he owns a Civic. So failing that, I'm going to guess again that however you 'activate' the whatever, what you're trying to do is call a function by clicking a button. If that's all:

<body>

<input type="button" onclick="enableTimer()" value="Begin">

<script>

var startTimer = false;

function enableTimer() {
startTimer = true;
alert(startTimer);
}

</script>

</body>

I wouldn't use, start, as a variable name.

gleddy




msg:3600023
 10:55 pm on Mar 13, 2008 (gmt 0)

fside, you have nailed my problem here. I won't post the whole original timer as it's not really what I am trying to solve here.

Now, your small function does exactly what I want, but when you take off the inline handler and try to do this *without* inline events, I have a hard time making it work.

Here is my try:

<script>
var startTimer = false;

function enableTimer() {
var form = document.getElementById("set");
form.onclick = function() {
startTimer = true;
}
alert(startTimer);
}
</script>

<body>

<form id="set">
<input type="text" id="seconds" />
<input type="submit" value="Start" id="submit" />
</form>

</body>

so this is what I am trying to understand. I want to change the startTimer global variable, but I think what is happening is I am ending up with two vars now, one local / one global.

I want the nested function to change the global variable.

Is this possible? I figure it should be possible without relying on inline event handlers. Or am I approaching this problem in the wrong way all together?

thanks!

daveVk




msg:3600060
 11:40 pm on Mar 13, 2008 (gmt 0)

startTimer is declared once only

var startTimer = false;

So there is only one variable of that name and it is global;

The alert statement will display the value of startTimer "false" once on page load then enableTimer is called.

So what makes you think the code is not working ?

gleddy




msg:3600064
 11:46 pm on Mar 13, 2008 (gmt 0)

I would think that when the onclick is triggered, then the global variable should be changed to true as that is what the nested function is intending to do.

Is this wrong?

MarkFilipak




msg:3600153
 2:05 am on Mar 14, 2008 (gmt 0)

> Here is my try

Where is your call to enableTimer()?

Information: I'm pursuing a solution in a related issue in another thread in this forum. My problem is compounded by the fact that my event handler is a library method that is a function property of a general library object, but the problem is otherwise the same. The problem is a classic. It revolves around (the fact?) that an event object does not execute in the global context, but in its own context (at least, in DOM compliant browsers). The global object may not be reachable (scoped from) event objects! I will cross-post here when (if) I find a solution. BTW, putting the event handler, or a call to the event handler, in-line as an event attribute of the HTML element always works, but in my case, I don't want to expose the handler to HTML but would rather hide it via javascript element.addEventListener().

gleddy




msg:3600183
 2:50 am on Mar 14, 2008 (gmt 0)

I would just use an onload function to call the enableTimer().

daveVk




msg:3600242
 4:22 am on Mar 14, 2008 (gmt 0)

I would think that when the onclick is triggered, then the global variable should be changed to true as that is what the nested function is intending to do.

Is this wrong?

No, I believe the code is 100% correct. However the alert shown in your post will display the value of the global variable prior to onclick firing.

Perhaps you have other evidence that the code does not work ?

fside




msg:3601398
 12:13 pm on Mar 15, 2008 (gmt 0)

> Is this possible? <

It was done, wasn't it? You had a global. A function changed the value of the global. Wasn't that the question?

gleddy




msg:3602402
 11:53 pm on Mar 16, 2008 (gmt 0)

Hi all.

thanks for the advice above. As stated by a couple of threads above, this was actually working correctly for me. The only thing I had to do was 'return false' for the button as the page was refreshing and the global was reseting itself.

So it was my testing method that was faulty. Thanks for all the tips :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved