Results 1 to 3 of 3

Thread: Learning the Code in My friend's Website of Disposable Tableware

  1. #1
    Join Date
    Mar 2012
    Location
    Gardena,California,USA
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Learning the Code in My friend's Website of Disposable Tableware

    I am learning javascript, and my friend gives me his B2B website. I can learn about the code in the disposable tableware site. I see the page:

    http://www.biodegradabletableware.com.cn/products/SL-047B.htm

    and want to figure out what the code means. Some of the code is here:

    Code:
    <script type="text/javascript">   
    var myAlert = document.getElementById("sendwaiting");  
    var mybg= document.getElementById("mybg");       
    function showAlphaDiv()   
    {      
    mybg.style.display="block";
    }   
    function closeAlert()   
    {    
    mybg.style.display = "none";
    }   
    </script>
    What does the code mean? And how to use it?
    Last edited by jscheuer1; 03-14-2012 at 02:33 AM. Reason: Format

  2. #2
    Join Date
    Mar 2011
    Posts
    2,026
    Thanks
    59
    Thanked 108 Times in 106 Posts
    Blog Entries
    4

    Default

    This script is for hiding and unhiding an element. An example is
    Code:
    <html>
    <head>
    <script type="text/javascript"> 
    function showAlphaDiv() 
    { 
    var divid = document.getElementById("mybg"); 
    divid.style.display = "block";
    } 
    function closeAlert() 
    { 
    var divid = document.getElementById("mybg"); 
    divid.style.display = "none";
    } 
    </script>
    </head>
    <body>
    <div id="mybg" style="display:none;">HELLO THIS IS SOME TEXT</div>
    <input type="button" onclick="showAlphaDiv();" value="Button1" />
    <input type="button" onclick="closeAlert();" value="Button2" />
    </body>
    </html>
    When you click on button1, the function showAlphaDiv is run. -

    Code:
    function showAlphaDiv() 
    { 
    var divid = document.getElementById("mybg"); 
    divid.style.display = "block";
    }
    As the variable mybg has been set to whatever element has the id of mybg
    This bit -
    Code:
    <div id="mybg">HELLO THIS IS SOME TEXT</div>
    it sets the style.display to block, which will display the text.

    The opossite happens when you click button two.
    This function is run -
    Code:
    function closeAlert() 
    { 
    var divid = document.getElementById("mybg"); 
    divid.style.display = "none";
    }
    which sets the style.display of the element with id mybg to none meaning you can't see it.

    NOTES:
    Code:
    var myAlert = document.getElementById("sendwaiting");
    won't do anything as there is no element with the id of sendwaiting.

    I made some minor changes to the structure of the script because other-wise it wouldn't have worked (depending on the postion of the script within the page).

    Hope this helps
    Keyboard1333
    Last edited by keyboard; 03-14-2012 at 03:46 AM. Reason: Made my post more readable

  3. #3
    Join Date
    Mar 2011
    Posts
    2,026
    Thanks
    59
    Thanked 108 Times in 106 Posts
    Blog Entries
    4

    Default

    One more thing,

    Here is a slightly cleaner version of the script you posted, but only using one button.

    Code:
    <html>
    <head>
    <script type="text/javascript"> 
    function showhidediv() 
    { 
    	var divid = document.getElementById("mybg"); 
    	if(divid.style.display == "block") {
    		divid.style.display = "none";
    		return;
    	}
    	if(divid.style.display == "none"){
    		divid.style.display = "block";
    		return;
    	}
    } 
    </script>
    </head>
    <body>
    <div id="mybg" style="display:none;">HELLO THIS IS SOME TEXT</div>
    <input type="button" onclick="showhidediv();" value="Button1" />
    </body>
    </html>
    Hope all this helps you out.
    Keyboard1333

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •