Practical Use of JavaScript: Use of innerHTMl and validation tips

Today's development involves information control on a layer, that is, to control what information is displayed in a layer, to find information to know how to use the innerHTML attribute to control the layer value, this innerHTML is similar to the value attribute in the form and can control the display value of the layer.

For example, if I have no value in a div layer and I want to display the value after penalizing an event, I can use the innerHTML attribute. In fact, in addition to the control layer, the innerHTML attribute, it also controls all elements in the window content, but I have not tested it.

(1) div tag Control

The div label is different from the span label. The div is a layer block and the span is a row. We can see the differences in the following demonstration. Let's take a look at the code for controlling the div.

<Script language = "javascript">
Function chageDiv (number)
{
If (number = 1 ){
Document. getElementById ("div1"). innerHTML = "value: 1 ";
}
If (number = 2 ){
Document. getElementById ("div1"). innerHTML = "value: 2 ";
}
}
</Script>

DIV block test: <div id = "div1"> default value </div>

<A href = "#" onClick = "chageDiv (1)"> change the value to 1. </a>
<A href = "#" onClick = "chageDiv (2)"> change the value to 2 </a>

When running, click "change value to 1", then the "default" content will be changed to "value to 1", but pay attention to the interface, "DIV test:" and "Default Value" are displayed in two rows, because DIV is displayed by block.

(2) span control

Similar to div, but it is displayed by line. See the following code:

Function chageSpan (number)
{
If (number = 1 ){
Document. getElementById ("span1"). innerHTML = "value: 1 ";
}
If (number = 2 ){
Document. getElementById ("span1"). innerHTML = "value: 2 ";
}
}
</Script>
Span row test:
<Span id = "span1"> default value </span> <br>
<A href = "#" onClick = "chageSpan (1)"> change the value to 1. </a>
<A href = "#" onClick = "chageSpan (2)"> change the value to 2. </a>

When you click "change value to 1", the "default value" is changed to "value to 1", but the "Span row test" and "Default Value" are displayed in the same row, different from DIV.

It is worth noting that, whether it is div or span, the names behind them are defined by id, rather than by name like a form.

(3) confirm confirmation prompt box Creation

When we want to perform a dangerous operation, such as deleting a content, we should give the user a prompt to make mistakes easily. Generally, you are prompted to use the confirm () function for processing. If you submit a parameter to it as the displayed message, a dialog box will pop up during access, if you click "OK", the function will be changed to "true". If you click "cancel", the system will return "false". We use two methods to control whether a user executes an operation.

Check 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 ('Are you sure you want to visit Sina news? ')){
Return true;
} Else {
Return false;
}
}
</Script>

Access Method 1:
<A href = "#" onClick = "accessNeteasy ()"> Netease news </a> <br>
Access Method 2:
<A href = "http://news.sina.com.cn" onClick = "return accessSina ()"> Sina news </a>

Here we have created two functions, one accessNeteay and one accessSina, which are used to access Netease And sina. We use different methods. The first method is to determine if it is true after the link is clicked, in this case, location is directed to the specified link. This method is not general and can only be targeted at a single link. The second method is to use the form of return value. If you are sure to return true when you want to access and false if you are not sure, this can be done for any link and written as a general information prompt, convenient call on the page.

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

For more tips, see the blue ideal link: http://www.blueidea.com/tech/web/2004/2379.asp