Vous pouvez appeler chaque fonction individuellement lors d'un événement de clic, mais cela ne fonctionnera pas après avoir écrit un corps de boucle. La fonction seule convient. J'écris toujours un test un par un, puis l'événement de clic peut être affiché individuellement, mais il y a un problème s'il y a un corps de boucle.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding:0;margin: 0;}
#btn{position: absolute;top:0;left:300px;}
p{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 op = document.getElementsByTagName("p");
function first() {
{
// btn.style.display = "none";
for (var i = 0; i < 5; i++) {
document.body.innerHTML += '<p>' + i + '</p>';
}
for (i = 0; i < op.length; i++) {
//op[i].index = i;
if (i > op.length / 2) {
op[i].style.left = i * 60 + "px";
op[i].style.top = (i - parseInt(op.length / 2)) * 60 + "px";
}
else {
// alert(i);
op[i].style.top = (parseInt(op.length / 2) - i) * 60 + "px";
op[i].style.left = i * 60 + "px";
}
}
}
}
function second() {
// btn.style.display="none";
for (var i = 0; i < 5; i++) {
document.box2.innerHTML += '<p id="box">' + i + '</p>';
}
for ( i = 0; i < op.length; i++) {
//op[i].index = i;
if(i>op.length/2){
op[i].style.left = (op.length-i -1)* 60 + "px";
op[i].style.top=i*60+"px";
}
else {
// alert( i);
op[i].style.top = i* 60 + "px";
op[i].style.left = i * 60 + "px";
}
}
}
function three() {
//btn.style.display = "none";
for (var i = 0; i < 5; i++) {
document.body.innerHTML += '<p>' + i + '</p>';
}
for (i = 0; i < op.length; i++) {
//op[i].index = i;
if (i > op.length / 2) {
op[i].style.left = (i - parseInt(op.length / 2)) * 60 + "px";
op[i].style.top = i * 60 + "px";
}
else {
// alert( i);
op[i].style.top = i * 60 + "px";
op[i].style.left = ( parseInt(op.length / 2) - i) * 60 + "px";
}
}
}
function four() {
//btn.style.display="none";
for (var i = 0; i < 5; i++) {
document.body.innerHTML += '<p>' + i +'</p>';
}
for ( i = 0; i < op.length; i++) {
op[i].index = i;
if(i>op.length/2){
op[i].style.left = i * 60 + "px";
op[i].style.top=(op.length-i-1)*60+"px";
}
else {
op[i].style.top = i * 60 + "px";
op[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="Cliquez pour générer li"/>
</body>
</html>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
document.body.innerHTML += '<p>' + i + '</p>'; Cette phrase est causée par le fait qu'après avoir ré-innerHTML, le clic précédemment lié a disparu et tout est en fait exécuté une fois k C'est juste un cas de ==0