#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2

    Unhappy 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>
  2. #2
  3. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,066
    Rep Power
    9398
    Are you sure that the default value of grabHiddenOrShownArea.style.display is "block"? Really sure?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2
    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?
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    1
    Rep 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>

    <!-- 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
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep 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>

    <!-- 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
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2
    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
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2
    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

IMN logo majestic logo threadwatch logo seochat tools logo