Home > Developer > JavaScript
The solution for javascript to incorrectly retrieve index values for events registered in batches using the for loop is javascript index.
The example in this article describes how to correctly retrieve the index value for events that javascript uses for loop batch registration. Share it with you for your reference. The specific analysis is as follows:
Many may encounter a problem, that is, when the for loop is used to register event processing functions in batches, and finally the event processing function is used to obtain the index value of the current element, it will fail, let's take a look at a code example:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> helping customers </title>
<Style type = "text/css">
Li {
Width: 240px;
Overflow: hidden;
Text-overflow: ellipsis;
White-space: nowrap;
Font-size: 12px;
Height: 30px;
}
</Style>
<Script type = "text/javascript">
Window. onload = function (){
Var oLis = document. getElementsByTagName ("li ");
Var oshow = document. getElementById ("show ");
For (var index = 0; index <oLis. length; index ++ ){
OLis [index]. onclick = function (){
Oshow. innerHTML = index;
}
}
}
</Script>
</Head>
<Body>
<Div id = "show"> </div>
<Ul>
<Li> only by striving hard can we have a bright tomorrow. </Li>
<Li> sharing mutual assistance is the biggest source of progress. </Li>
<Li> every day is new, so cherish it. </Li>
<Li> no one is a master at the beginning, and only efforts can make it possible to grow. </li>
<Li> only the current time is valuable, and the next second is illusory </li>
</Ul>
</Body>
</Html>
In the code above, when you click the li element, the pop-up value is always four. Our original idea is that click the li element to display the index value of the current li element in the div, the following is a brief analysis of the causes. The reason is very simple. After the for loop is executed, the index value has changed to four, so the above phenomenon occurs.
The code is modified as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> helping customers </title>
<Style type = "text/css">
Li {
Width: 240px;
Overflow: hidden;
Text-overflow: ellipsis;
White-space: nowrap;
Font-size: 12px;
Height: 30px;
}
</Style>
<Script type = "text/javascript">
Window. onload = function (){
Var oLis = document. getElementsByTagName ("li ");
Var oshow = document. getElementById ("show ");
For (var index = 0; index <oLis. length; index ++ ){
OLis [index]. _ index = index;
OLis [index]. onclick = function (){
Oshow. innerHTML = this. _ index;
}
}
}
</Script>
</Head>
<Body>
<Div id = "show"> </div>
<Ul>
<Li> only by striving hard can we have a bright tomorrow. </Li>
<Li> sharing mutual assistance is the biggest source of progress. </Li>
<Li> every day is new, so cherish it. </Li>
<Li> no one is a master at the beginning, and only efforts can make it possible to grow. </li>
<Li> only the current time is valuable, and the next second is illusory </li>
</Ul>
</Body>
</Html>
The above Code meets our requirements. Of course we can also use the closure method. The Code is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> helping customers </title>
<Style type = "text/css">
Li {
Width: 240px;
Overflow: hidden;
Text-overflow: ellipsis;
White-space: nowrap;
Font-size: 12px;
Height: 30px;
}
</Style>
<Script type = "text/javascript">
Window. onload = function (){
Var oLis = document. getElementsByTagName ("li ");
Var oshow = document. getElementById ("show ");
For (var index = 0; index <oLis. length; index ++ ){
(Function (index ){
OLis [index]. onclick = function (){
Oshow. innerHTML = index;
}
}) (Index)
}
}
</Script>
</Head>
<Body>
<Div id = "show"> </div>
<Ul>
<Li> only by striving hard can we have a bright tomorrow. </Li>
<Li> sharing mutual assistance is the biggest source of progress. </Li>
<Li> every day is new, so cherish it. </Li>
<Li> no one is a master at the beginning, and only efforts can make it possible to grow. </li>
<Li> only the current time is valuable, and the next second is illusory </li>
</Ul>
</Body>
</Html>
I hope this article will help you with javascript-based web programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
