Forum Moderators: open
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>
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.
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.
<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?
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 :-)
alert("global var = " + start);
will always show false.
try
form.onclick = function() {
alert("start = " + start);
start = ! start;
}
value should toggle each click
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.
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!
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 ?
Is this wrong?
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().
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 ?
It was done, wasn't it? You had a global. A function changed the value of the global. Wasn't that the question?
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 :-)
