JavaScript application: Use of innerHTML and validation hints

Javascript

Today's development involves a layer of information control, that is, to control the display of what information in a layer, to find information to know the use of the innerHTML attribute to control the value of the layer, this innerhtml with the form inside the value of a bit similar to control the level of the display value.

For example, I have no value in a div layer, I punish an event to display the value, then you can use the innerHTML property, in fact, the innerHTML property in addition to control layer, but also control the content of all elements of the window, but I have not tested.

(1) Control of DIV tags

div tags are not the same as span tags, div is a layer of block, span is a row, we see the next demonstration to know the difference. Let's look at a section of code that controls Div.

<script language= "JavaScript" >
function Chagediv (number)
{
if (number = = 1) {
document.getElementById ("Div1"). InnerHTML = "value is 1";
}
if (number = = 2) {
document.getElementById ("Div1"). InnerHTML = "value is 2";
}
}
</script>

div block test: <div id= "DIV1" > Default value </div>

<a href= "#" > Change value to 1</a>
<a href= "#" > Change value to 2</a>

Run the time, click "Change value to 1" then "Default" will be changed to "value is 1", but notice the interface, it will be found that "div test:" and "Default value" is two lines, because the div is displayed by block.

(2) control over span

Similar to Div, but it is displayed as a row, look at the following code:

function Chagespan (number)
{
if (number = = 1) {
document.getElementById ("Span1"). InnerHTML = "value is 1";
}
if (number = = 2) {
document.getElementById ("Span1"). InnerHTML = "value is 2";
}
}
</script>
Span Line test:
<span id= "Span1" > Default value </span><br>
<a href= "#" > Change value to 1</a>
<a href= "#" > Change value to 2</a>

When you click "Change value to 1", "Default" will become "value 1", but "span row test" and "Default value" are displayed on the same line, unlike Div.

Another noteworthy thing is that, whether it's a div or a span, the names that follow are defined as IDs, not defined as forms by using name.

(3) The production of Confirm confirmation prompt box

When we want to perform a dangerous operation, such as the deletion of a content, and so on, it should give users the appropriate prompts users are not easy to make mistakes. The general hint is to use the Confirm () function to handle, give it a parameter as the display of information prompts, then the visit will pop-up dialog box, if clicked "OK" then the change function return true, clicked "Cancel" will put back false, We use two methods for this feature to control whether a user performs an action.

Look at the code:

<script language= "JavaScript" >
function Accessneteasy ()
{
if (confirm) (' You really want to visit NetEase news? ') {
location= ' http://calendar.eyou.eyou ';
}
}
function Accesssina ()
{
if (Confirm (' You're sure you want to visit Sina News? ')) {
return true;
} else {
return false;
}
}
</script>

Access Mode one:
<a href= "#" > NetEase news </a><br>
Access Mode two:
<a href= "http://news.sina.com.cn" > Sina news </a>

We have set up here two functions, a Accessneteay, a Accesssina, is to visit NetEase and Sina, we use different methods, the first is when the link, judge if it is true, then location to the specified link, This method comparison does not have a generic type, only for individual links. The second method is to use the form of a return value, when it is determined to access the return of true, when uncertain return false, then this can be done for any link, written in a general information prompt, easy to call on the page.

The above code has been tested and can be extended on its own basis to write out the JavaScript code you need.

More tips advice on blue ideal links: http://www.blueidea.com/tech/web/2004/2379.asp

Author:heiyeluren
Date:2005-8-1