Global variable not remembering value

  • Thread starter webmasterATflymagnetic.com
  • Start date
W

webmasterATflymagnetic.com

I would be grateful for some pointers to the code below. I want to
click the button and it toggles the showing of text. The state is
tracked in the variable det. Whilst the function itself works, I have
two questions:

* Why does it not 'stick' with the new value (ie det = true), but keep
reverting to the false value?
* Why does it work even more poorly in IE? The line with
getElementById() in particular seems not to rewrite the HTML.

I expect it to start with det = false, so only show the "Detail"
button. When you click this you should then
see the info text, and a new button with the text "Close". When this
is showing det should be true. The idea is to keep toggling between
the two states as you click the button.

Is there some fundamental error with this? If so I can't see it.


<html>
<head>
<script>
var det = false;
var info = "This is some information to show.";

function toggleDetail() {
var text;

det = !det; // Toggle detail: doesn't see to work.
if(det) {
text = info + " " + detailLink("Close")
}else{
text = " " + detailLink("Details");
}
alert(det);
document.getElementById("detail").innerHTML = text;
return true;
}

function detailLink(text) {
return "<input type = \"submit\" value = \"" + text + "\">"
}
</script>
</head>

<body>
<h1>Heading</h1>
<p><form onSubmit="toggleDetail();">
<span id = "detail"><input type="submit" value="Details"></span></p>
</form>
</body>
</html>
 
T

tomtom.wozniak

I would be grateful for some pointers to the code below. I want to
click the button and it toggles the showing of text. The state is
tracked in the variable det. Whilst the function itself works, I have
two questions:

* Why does it not 'stick' with the new value (ie det = true), but keep
reverting to the false value?
* Why does it work even more poorly in IE? The line with
getElementById() in particular seems not to rewrite the HTML.

I expect it to start with det = false, so only show the "Detail"
button. When you click this you should then
see the info text, and a new button with the text "Close". When this
is showing det should be true. The idea is to keep toggling between
the two states as you click the button.

Is there some fundamental error with this? If so I can't see it.

<html>
<head>
<script>
var det = false;
var info = "This is some information to show.";

function toggleDetail() {
var text;

det = !det; // Toggle detail: doesn't see to work.
if(det) {
text = info + " " + detailLink("Close")
}else{
text = " " + detailLink("Details");
}
alert(det);
document.getElementById("detail").innerHTML = text;
return true;

}

function detailLink(text) {
return "<input type = \"submit\" value = \"" + text + "\">"}

</script>
</head>

<body>
<h1>Heading</h1>
<p><form onSubmit="toggleDetail();">
<span id = "detail"><input type="submit" value="Details"></span></p>
</form>
</body>
</html>
Click to expand...

Try this out. You were destroying your submit button in the middle of
your submission! Basically, I separated the submit button change from
the detail display. Let me know if this helps bring back your
sanity. :)

<html>
<head>
<script>
var showDetails = false;
var infoDetails = "This is some information to show.";

function toggleDetail() {
showDetails = ! showDetails;
document.getElementById('detail').innerHTML = ( showDetails ?
infoDetails : "" );
document.getElementById('toggle').value = ( showDetails ?
"Close" : "Details" );
}
</script>
</head>
<body>
<h1>Heading</h1>
<span id="detail"></span>
<input id="toggle" type="button" value="Details"
onClick="toggleDetail();">
</body>
</html>
 
T

The Natural Philosopher

webmasterATflymagnetic.com said:
I would be grateful for some pointers to the code below. I want to
click the button and it toggles the showing of text. The state is
tracked in the variable det. Whilst the function itself works, I have
two questions:

* Why does it not 'stick' with the new value (ie det = true), but keep
reverting to the false value?
Click to expand...

I am a javascript novice, but surely you need to tell the function
toggleDetail that det is GLOBAL in scope?

In C that would be 'external', from memory, in PHP its 'global'..

In C I would declare det as a 'static' variable INSIDE the function..

There's probably a way to do that in Java shit too.


* Why does it work even more poorly in IE? The line with
getElementById() in particular seems not to rewrite the HTML.
Click to expand...
I THINK I met this befre, SPANS can't have ID's - only DIVS can or
something. Or is it that they cant have inerHTML.

Now you know why I call it Javashit. Its never the same syntax twice..
 
W

webmasterATflymagnetic.com

Wow!

Firstly it works (and in IE as well -- so I take back my invective of
that particular browser!). Secondly, I see the technique here is to
split up the two tags and treat each differently; thanks for
illustrating this, I'd never thought of doing it this way.

And thirdly, sanity (and language!) restored back to normal.

Thanks again. Your response is much appreciated!!
 
D

Doug Gunnoe

I would be grateful for some pointers to the code below. I want to
click the button and it toggles the showing of text. The state is
tracked in the variable det. Whilst the function itself works, I have
two questions:

* Why does it not 'stick' with the new value (ie det = true), but keep
reverting to the false value?
* Why does it work even more poorly in IE?  The line with
getElementById() in particular seems not to rewrite the HTML.

I expect it to start with det = false, so only show the "Detail"
button. When you click this you should then
see the info text, and a new button with the text "Close". When this
is showing det should be true. The idea is to keep toggling between
the two states as you click the button.

Is there some fundamental error with this? If so I can't see it.

<html>
<head>
<script>
var det = false;
var info = "This is some information to show.";

function toggleDetail() {
        var text;

        det = !det;     // Toggle detail: doesn't see to work.
        if(det) {
                text = info + " " + detailLink("Close")
        }else{
                text = " " + detailLink("Details");
        }
        alert(det);
        document.getElementById("detail").innerHTML = text;
        return true;

}

function detailLink(text) {
        return "<input type = \"submit\" value = \"" + text + "\">"}

</script>
</head>

<body>
<h1>Heading</h1>
<p><form onSubmit="toggleDetail();">
<span id = "detail"><input type="submit" value="Details"></span></p>
</form>
</body>
</html>
Click to expand...

One problem is that when you click your submit button, the page
reloads and resets your 'det' var to false.

I changed it up a little.

<html>
<head>
<script>

var det = false;
var info = "This is some information to show.";

function toggleDetail() {
var text;

det = !det; // Toggle detail: doesn't see to work.
if(det) {
text = info;
document.getElementById('btn').value="Close";
}else{
text = " ";
document.getElementById('btn').value="Details";
}
document.getElementById("detail").innerHTML = text;

}


</script>
</head>

<body>
<h1>Heading</h1>
<p>
<span id ="detail"></span><input id="btn" type="button"
value="Details" onclick="toggleDetail();" /></p>
</body>

Good luck.
 
D

David Mark

I am a javascript novice, but surely you need to tell the function
toggleDetail that det is GLOBAL in scope?
Click to expand...

And how would you do that?
In C that would be  'external', from memory, in PHP its 'global'..

In C I would declare det as a 'static' variable INSIDE the function..

There's probably a way to do that in Java shit too.
Click to expand...

For someone new to JavaScript, you certainly have formed some strong
opinions about it.
I THINK I met this befre, SPANS can't have ID's - only DIVS can or
something. Or is it that they cant have inerHTML.
Click to expand...

No and no.
Now you know why I call it Javashit. Its never the same syntax twice..
Click to expand...

Of course, host objects have nothing to do with the language.
JavaScript syntax is very well defined.
 
D

Doug Gunnoe

I am a javascript novice, but surely you need to tell the function
toggleDetail that det is GLOBAL in scope?
Click to expand...

Declaring a var like that outside of any function makes it global.

Using the var keyword inside any function makes it local.

Skipping the var keyword altogether will also make it global.

In javascript you could declare and initialize a variable inside a
function like so:

function someFunction(){
det = false;
}

and det will be a global.
 
W

webmasterATflymagnetic.com

Thanks to everyone who have responded. I'm now a happy bunny as I have
a way forward.

Cheers!
 
T

The Natural Philosopher

Doug said:
Declaring a var like that outside of any function makes it global.

Using the var keyword inside any function makes it local.

Skipping the var keyword altogether will also make it global.

In javascript you could declare and initialize a variable inside a
function like so:

function someFunction(){
det = false;
}

and det will be a global.
Click to expand...

Thanks for that.
I guess I should have remembered it all started as some sort of BASIC.
And would therefore break most of the rules of structured programming
before it got round to trying to add them all back again.

With C, there was one slim book, that almost completely defined the
language.

With Javascript, I have a book 4" thick that doesn't even really define
anything. Sigh.
 
D

Doug Gunnoe

Thanks for that.
I guess I should have remembered it all started as some sort of BASIC.
And would therefore break most of the rules of structured programming
before it got round to trying to add them all back again.

With C, there was one slim book, that almost completely defined the
language.

With Javascript, I have a book 4" thick that doesn't even really define
anything. Sigh.
Click to expand...

JavaScript can be a pain in the ass at first.

I think it is a very intersting language once you get use to some of
its quirks.

The loose typing and automatic conversion of vars based on context was
an early pain for me. But now I like it.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Add recipes using JavaScript in table 20
How to use a global variable within a function? 5
Php modal form to email 1
Survey details won't go through using php, ajax, Mysql 0
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
JavaScript code not working!! 6
Page do not work, when adding php code 1
Jquery not triggering / acting as expected. 0

Members online

No members online now.
Total: 77 (members: 0, guests: 77)
Robots: 394

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,819
Latest member
masterdaster

Latest Threads

Top