javascript - 在 for 循环中添加 onClick 事件

Question

我是 Javascript 的初学者。我想要做的是当用户点击“点击开始循环”时，第一次<li>将是 1。用户第二次点击它，它将是 2，第三次，它将是 3。第三次单击，循环将中断。

我的代码的问题是它总是显示数字 3，而不是从 1 开始一直到 3。

function myFunction() {
    demo = document.getElementById("demo") 
    ul = document.createElement("ul")
    demo.appendChild(ul)
    li = document.createElement("li")
    ul.appendChild(li) 
    
    for (let i = 1; i <= 3; i++){       
        li.innerText = i     
    }
}

<p id="demo" onclick="myFunction()">Click to start loop</p>

标签： javascript

Answer 1

一种解决方案可能是创建一个初始值设置为 1 的全局变量，并在每次点击您的<p>标签时增加它。

我已经使用全局变量实现了相同的功能counter。

<p id="demo" onclick="myFunction()">Click to start loop</p>
<script>
var counter = 1;
function myFunction() {
    if(counter === 4){
      return;
    }
    demo = document.getElementById("demo");
    ul = document.createElement("ul");
    demo.appendChild(ul);
    li = document.createElement("li");
    ul.appendChild(li);
    li.innerText = counter;
    counter++;
}
</script>