[Ihatephp]

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..

<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>

[requinix]

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

[Ihatephp]

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?

[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

[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

[Ihatephp]

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

[Ihatephp]

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