This article describes the solution to the fact that events registered in JavaScript using for loop batch cannot correctly obtain index values. Share it for your reference. The specific analysis is as follows:
Many friends may encounter a problem, that is, when using a for loop to batch register the event processing function, and then finally obtain the index value of the current element through the event processing function, it will fail. Let's look at a code example first:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//www.VeVB.COM/" />
<title>Wulin.com</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 show=document.getElementById("show");
for(var index=0;index<oLis.length;index++){
oLis[index].onclick=function(){
show.innerHTML=index;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
<li>Only by working hard can there be a better tomorrow. </li>
<li>Sharing and mutual assistance is the biggest driving force for progress. </li>
<li>Every day is new, cherish it. </li>
<li>No one is a master from the beginning, only by working hard can you grow</li>
<li>Only the present time is precious, the next second is illusory</li>
</ul>
</body>
</html>
In the above code, when clicking on the li element, the pop-up value is always four. Our original idea is to click on the li element to display the index value of the current li element in the div. Let’s briefly analyze the reasons below. 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:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//www.VeVB.COM/" />
<title>Wulin.com</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 show=document.getElementById("show");
for(var index=0;index<oLis.length;index++){
oLis[index]._index=index;
oLis[index].onclick=function(){
show.innerHTML=this._index;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
<li>Only by working hard can there be a better tomorrow. </li>
<li>Sharing and mutual assistance is the biggest driving force for progress. </li>
<li>Every day is new, cherish it. </li>
<li>No one is a master from the beginning, only by working hard can you grow</li>
<li>Only the present time is precious, the next second is illusory</li>
</ul>
</body>
</html>
The above code implements our requirements, and of course, you can also use closures. The code is as follows:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="//www.VeVB.COM/" />
<title>Wulin.com</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 show=document.getElementById("show");
for(var index=0;index<oLis.length;index++){
(function(index){
oLis[index].onclick=function(){
show.innerHTML=index;
}
})(index)
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
<li>Only by working hard can there be a better tomorrow. </li>
<li>Sharing and mutual assistance is the biggest driving force for progress. </li>
<li>Every day is new, cherish it. </li>
<li>No one is a master from the beginning, only by working hard can you grow</li>
<li>Only the present time is precious, the next second is illusory</li>
</ul>
</body>
</html>
I hope that the description in this article will be helpful to everyone's web programming based on javascript.