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

**kitson** · 03-14-2012, 01:31 AM

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?

**keyboard** · 03-14-2012, 02:17 AM

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

**keyboard** · 03-14-2012, 05:00 AM

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

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions