Solution that javascript cannot get index values correctly by using for circular batch registered events
- 2020-05-07 19:14:45
- OfStack
This article illustrates an example of how javascript failed to get index values correctly by using the for circular batch registration event. Share with you for your reference. Specific analysis is as follows:
Many friends may encounter a problem, that is, when using for loop batch registration event handler function, and then finally through the event handler function to obtain the index value of the current element will fail, first look at a code instance:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title> The home of the script </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 hard work will have a better tomorrow. </li>
<li> Sharing is the greatest source of progress. </li>
<li> every 1 The sky is new, should cherish well. </li>
<li> No man or woman 1 Start is a master, only efforts to have the possibility of growth </li>
<li> Only the present moment is valuable 1 Seconds are illusory </li>
</ul>
</body>
</html>
In the above code, the popup value is always 4 when the li element is clicked. Our original idea was to click the li element to display the index value of the current li element in div. The reason is quite simple. After the for loop is completed, the value of index has changed to 4.
The code is modified as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title> The home of the script </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 hard work will have a better tomorrow. </li>
<li> Sharing is the greatest source of progress. </li>
<li> every 1 The sky is new, should cherish well. </li>
<li> No man or woman 1 Start is a master, only efforts to have the possibility of growth </li>
<li> Only the present moment is valuable 1 Seconds are illusory </li>
</ul>
</body>
</html>
The above code implements our requirements, of course, we can also use the method of closure, the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title> The home of the script </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 hard work will have a better tomorrow. </li>
<li> Sharing is the greatest source of progress. </li>
<li> every 1 The sky is new, should cherish well. </li>
<li> No man or woman 1 Start is a master, only efforts to have the possibility of growth </li>
<li> Only the present moment is valuable 1 Seconds are illusory </li>
</ul>
</body>
</html>
I hope this article is helpful for you to design web program based on javascript.