Home  >  Article  >  Web Front-end  >  Practical application of JavaScript: use of innerHTMl and confirmation prompt_JavaScript

Practical application of JavaScript: use of innerHTMl and confirmation prompt_JavaScript

WBOY
WBOYOriginal
2016-05-16 19:29:211206browse

Today’s development involves information control of a layer, which is to control what information is displayed in a layer. After searching for information, I learned that the innerHTML attribute is used to control the value of the layer. This innerHTML is somewhat similar to the value attribute in the form and can be controlled. The displayed value of the layer.

For example, if there is no value in a div layer, and I want to display the value after punishing an event, then I can use the innerHTML attribute. In fact, in addition to controlling the layer, the innerHTML attribute can also control all elements of the window content, but I haven't tested it.

(1) Control of div tags

The div tag is different from the span tag. A div is a layer of blocks, and a span is a line. We will know the difference by watching the demonstration below. Let's first look at a piece of code that controls the div.

DIV block test:

Default value

Change value to 1
Change the value to 2

When running, click "Change value to 1" and the content of "Default value" will be changed to "Value to 1", but pay attention to the interface, you will find "DIV test:" and "Default value" " is displayed in two lines because DIV is displayed in blocks.

(2) Control of span

is similar to div, but it is displayed according to rows, see the following code:

function chageSpan(number)
{
if (number == 1) {
document.getElementById("span1").innerHTML = "Value is 1";
}
if (number == 2) {
document.getElementById("span1").innerHTML = "The value is 2";
}
}

Span line test :
Default value

Change value to 1< ;/a>
Change the value to 2

When you click "Change Value to 1", the "Default Value" will change to "Value is 1", but "Span Row Test" and "Default Value" are displayed on the same line, which is different from DIV.

Another thing worth noting is that whether it is a div or a span, the following name is defined by the id, not by the name like the form.

(3) Production of confirmation prompt box

When we want to perform a dangerous operation, such as deleting a certain content, etc., we should give the user corresponding prompts to prevent the user from making mistakes. Generally, prompts are processed using the confirm() function. Submit a parameter to it as a displayed information prompt, and a dialog box will pop up when accessing. If "OK" is clicked, the function will return true. If "Cancel" is clicked, " will be returned to false. We use two methods to control whether the user performs a certain operation based on this feature.

Look at the code:

Access method one:
NetEase News

Access method two:
< a href="http://news.sina.com.cn" onClick="return accessSina()">Sina News

We have created two functions here, one accessNeteay and one accessSina, which are used to access NetEase and Sina. We use different methods. The first one is to determine if it is true after clicking on the link, then locate the specified location. Link, this method is not universal and can only target a single link. The second method is to use the form of return value, which returns true when it is determined to be accessed and false when it is not sure. Then this can be done for any link and written as a general information prompt to facilitate calls on the page.

The above codes have been tested and passed. You can expand on this basis and write the JavaScript code you need.

For more tips, please refer to Blue Idea’s link: http://www.blueidea.com/tech/web/2004/2379.asp

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn