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

View Full Version : 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:

<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

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

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 -

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

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:

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.

<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