January 27th, 2013, 02:42 AM
-
Why doesn't this function work by the first click??
Hi there.
I have this JS code to just demonstrate how to show and hide a content by clicking text.
This basically work but only after the second click. When you refresh the page and click on the "Click me please" text, it doesn't seem to fire up the function "changeButton()".
Can anyone explain exactly why, please?
If I can know why, I think I will deepen my understanding of how the JavaScript engine were designed to work.
So please someone help me..
Code:
<script>
function changeButton()
{
var grabHiddenOrShownArea = document.getElementById('hidden_or_shown_area');
if( grabHiddenOrShownArea.style.display == 'block')
{
var displayValue = 'none';
}
else
{
var displayValue = 'block';
}
grabHiddenOrShownArea.style.display = displayValue;
}
</script>
<!-- this is button to fire up the function -->
<div id="button">
<a href="#" id="hit_this_button" onclick="changeButton()">Click me please.</a>
</div>
<!-- shown or hidden area -->
<div id="hidden_or_shown_area">
<h1>Now shown</h1>
</div>
January 27th, 2013, 04:05 AM
-
Are you sure that the default value of grabHiddenOrShownArea.style.display is "block"? Really sure?
January 27th, 2013, 06:08 AM
-
Well I actually set the value but forgot to put in the question " #grabHiddenOrShownArea{display:block;}" in the CSS or "grabHiddenOrShownArea.style.display == "block""; in the script.
Originally Posted by requinix
Are you sure that the default value of grabHiddenOrShownArea.style.display is "block"? Really sure?
January 29th, 2013, 12:53 AM
-
Please use this code
Hi,
I have done small changes in your code :-
<script type = "text/javascript">
function changeButton()
{
var grabHiddenOrShownArea = document.getElementById('hidden_or_shown_area');
grabHiddenOrShownArea.style.display= 'none';
</script>
<div id="button">
<a href="#" id="hit_this_button" onclick="changeButton()">Click me please.</a>
</div>
<!-- shown or hidden area -->
<div id="hidden_or_shown_area" style="display:block">
<h1>Now shown</h1>
</div>
If that area is already available on page load then code is not required for that.
You can easily hide it by writing the above code.
I think the above code contains whatever you want.
Thanks
January 29th, 2013, 01:35 AM
-
Reply to previos response
Hi,
I have done small changes in your code
<script type = "text/javascript">
function changeButton()
{
var grabHiddenOrShownArea = document.getElementById('hidden_or_shown_area');
grabHiddenOrShownArea.style.display= 'none';
</script>
<div id="button">
<input type = "button" id="hit_this_button" onclick="changeButton()" value = "Click me please"/></div>
<!-- shown or hidden area -->
<div id="hidden_or_shown_area">
<h1>Now shown</h1>
</div>
Kindly use button instead of hyperlink because hyperlink submits whole page so whenever you click on it the text hide for a moment and again the page get refreshed because of link.
So its better to use button.
Thanks
January 31st, 2013, 12:25 AM
-
thanks for your reply.
Well, I wanted the area to be shown when the page is first loaded.
I understand if you set display to none, the toggle function will work from the first click.
Originally Posted by ankit3010
Hi,
I have done small changes in your code :-
<script type = "text/javascript">
function changeButton()
{
var grabHiddenOrShownArea = document.getElementById('hidden_or_shown_area');
grabHiddenOrShownArea.style.display= 'none';
</script>
<div id="button">
<a href="#" id="hit_this_button" onclick="changeButton()">Click me please.</a>
</div>
<!-- shown or hidden area -->
<div id="hidden_or_shown_area" style="display:block">
<h1>Now shown</h1>
</div>
If that area is already available on page load then code is not required for that.
You can easily hide it by writing the above code.
I think the above code contains whatever you want.
Thanks
January 31st, 2013, 12:29 AM
-
thanks for your reply.
Well, I wanted the area to be shown when the page is first loaded.
I understand if you set display to none, the toggle function will work from the first click.
But i didn't know using hyperlink is the one that makes the page refresh again when it's clicked. I hated that and thanks.
Originally Posted by tiwariankit
Hi,
I have done small changes in your code
<script type = "text/javascript">
function changeButton()
{
var grabHiddenOrShownArea = document.getElementById('hidden_or_shown_area');
grabHiddenOrShownArea.style.display= 'none';
</script>
<div id="button">
<input type = "button" id="hit_this_button" onclick="changeButton()" value = "Click me please"/></div>
<!-- shown or hidden area -->
<div id="hidden_or_shown_area">
<h1>Now shown</h1>
</div>
Kindly use button instead of hyperlink because hyperlink submits whole page so whenever you click on it the text hide for a moment and again the page get refreshed because of link.
So its better to use button.
Thanks