javascript - 关于函数调用的问题，点击事件的循环体不能循环这四个函数，但是用alert测试过循环体能循环。
本文介绍了javascript - 关于函数调用的问题，点击事件的循环体不能循环这四个函数，但是用alert测试过循环体能循环。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
点击事件单独调用每一个函数都没问题，但是写上循环体之后就不行了。函数单独来说没问题，我都是写一个测试一个，然后点击事件单独的函数也能显示但是有循环体就有问题了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding:0;margin: 0;}
#btn{position: absolute;top:0;left:300px;}
div{width: 50px;height:50px;position: absolute;top:0;left:0;background:green;font-size: 30px; text-align:center;color:red;line-height: 50px;cursor: pointer;}
</style>
<script>
window.onload=function () {
var btn = document.getElementById("btn");
var odiv = document.getElementsByTagName("div");
function first() {
{
// btn.style.display = "none";
for (var i = 0; i < 5; i++) {
document.body.innerHTML += '<div>' + i + '</div>';
}
for (i = 0; i < odiv.length; i++) {
//odiv[i].index = i;
if (i > odiv.length / 2) {
odiv[i].style.left = i * 60 + "px";
odiv[i].style.top = (i - parseInt(odiv.length / 2)) * 60 + "px";
}
else {
// alert(i);
odiv[i].style.top = (parseInt(odiv.length / 2) - i) * 60 + "px";
odiv[i].style.left = i * 60 + "px";
}
}
}
}
function second() {
// btn.style.display="none";
for (var i = 0; i < 5; i++) {
document.box2.innerHTML += '<div id="box">' + i + '</div>';
}
for ( i = 0; i < odiv.length; i++) {
//odiv[i].index = i;
if(i>odiv.length/2){
odiv[i].style.left = (odiv.length-i -1)* 60 + "px";
odiv[i].style.top=i*60+"px";
}
else {
// alert( i);
odiv[i].style.top = i* 60 + "px";
odiv[i].style.left = i * 60 + "px";
}
}
}
function three() {
//btn.style.display = "none";
for (var i = 0; i < 5; i++) {
document.body.innerHTML += '<div>' + i + '</div>';
}
for (i = 0; i < odiv.length; i++) {
//odiv[i].index = i;
if (i > odiv.length / 2) {
odiv[i].style.left = (i - parseInt(odiv.length / 2)) * 60 + "px";
odiv[i].style.top = i * 60 + "px";
}
else {
// alert( i);
odiv[i].style.top = i * 60 + "px";
odiv[i].style.left = ( parseInt(odiv.length / 2) - i) * 60 + "px";
}
}
}
function four() {
//btn.style.display="none";
for (var i = 0; i < 5; i++) {
document.body.innerHTML += '<div>' + i +'</div>';
}
for ( i = 0; i < odiv.length; i++) {
odiv[i].index = i;
if(i>odiv.length/2){
odiv[i].style.left = i * 60 + "px";
odiv[i].style.top=(odiv.length-i-1)*60+"px";
}
else {
odiv[i].style.top = i * 60 + "px";
odiv[i].style.left = i * 60 + "px";
}
}
}
var k=0;
btn.onclick = function () {
//if(k==0){alert(1)}
if(k==0){first()}
if(k==1){second()}
if(k==2){three()}
if(k==3){four()}
k++;
// first();
//second();
//three();
//four();
}
};
</script></head>
<body>
<input id="btn" type="button" value="点击生成li"/>
</body>
</html>
解决方案
document.body.innerHTML += '<div>' + i + '</div>';这一句导致的,因为你重新innerHTML之后,之前绑定的onclick没有了,所有其实就执行一次k==0的情况而已
这篇关于javascript - 关于函数调用的问题，点击事件的循环体不能循环这四个函数，但是用alert测试过循环体能循环。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
