Why doesn't this function work by the first click??

Dev Shed Forums Sponsor:

January 27th, 2013, 02:42 AM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 57

Time spent in forums: 11 h 16 m 38 sec
Reputation Power: 1

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

requinix

Still alive

Dev Shed God 16th Plane (12500 - 12999 posts)

Join Date: Mar 2007

Location: Washington, USA

Posts: 12,869

Folding Points: 417516 Folding Title: Super Ultimate Folder - Level 1

Time spent in forums: 5 Months 1 Week 5 Days 6 h 19 m 22 sec
Reputation Power: 8977

Send a message via Google Talk to requinix

Are you sure that the default value of grabHiddenOrShownArea.style.display is "block"? Really sure?

__________________
Site rules and FAQ | Project Suggestions | mod_rewrite guide | PHP New User Guide and FAQ - PHP Stickies | Regex Resources

January 27th, 2013, 06:08 AM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 57

Time spent in forums: 11 h 16 m 38 sec
Reputation Power: 1

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.

Quote:

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

ankit3010

Registered User

Join Date: Jan 2013

Posts: 1

Time spent in forums: 15 m 8 sec
Reputation Power: 0

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>


<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

tiwariankit

Registered User

Join Date: Jan 2013

Posts: 5

Time spent in forums: 1 h 5 m 43 sec
Reputation Power: 0

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>


<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

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 57

Time spent in forums: 11 h 16 m 38 sec
Reputation Power: 1

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.

Quote:

Originally Posted by ankit3010

January 31st, 2013, 12:29 AM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 57

Time spent in forums: 11 h 16 m 38 sec
Reputation Power: 1

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.

Quote:

Originally Posted by tiwariankit

Why doesn't this function work by the first click??

Developer Shed Advertisers and Affiliates