Javascript 如何使用按钮控制循环中的迭代次数？

我希望通过单击按钮控制循环的迭代

例如，以下代码只需单击一次即可打印：

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

---

HTML

<h1>Controlling loop iterations with "Click"</h1>    
<button type="submit" style="width: 80px" name="submit" onclick="main()">Submit</button>
<p id="text"></p>

---

像这样改变你的功能

function loopFunction() {
    var text = "";
    var i = loopFunction.cachedValue ? loopFunction.cachedValue : 0;
    var max = 5;

    if(loopFunction.cachedValue >= max){
       return false;
    }

    text += "<br>The number is " + i;

    if(!loopFunction.cachedValue){
        loopFunction.cachedValue = 0;
    }

    loopFunction.cachedValue++;

    return false;
}

函数loopFunction（）{
var text=“”；
var i=loopFunction.cachedValue？loopFunction.cachedValue:0；
var max=5；
if（loopFunction.cachedValue>=max）{
返回false；
}
text+=“
数字为”+i；
if（！loopFunction.cachedValue）{
loopFunction.cachedValue=0；
}
loopFunction.cachedValue++；
返回false；
}

无需使用循环。将

i

放在函数外部并将增量放在函数中。如果

i

大于5，则将设置为0

var text = document.getElementById("text");
var i = 0;
function main() {
    text.innerHTML += "The number is " + i + "<br>";
    if(i > 5) {
        i = 0;
        text.innerHTML = "The number is " + i + "<br>";
    }
    i += 1;
}

var text=document.getElementById（“text”）；
var i=0；
函数main（）{
text.innerHTML+=“数字为”+i+“
”；
如果（i>5）{
i=0；
text.innerHTML=“数字为“+i+”
”；
}
i+=1；
}

---

如果您只想一次完成一次迭代，那么为什么还要迭代呢

您可以简单地使用全局

变量
来保留您的计数值


var计数=0；
函数main（）{
var textElement=document.getElementById（“文本”）；
如果（计数>=5）{
计数=0；
textElement.innerHTML=“”；
}
textElement.innerHTML+=“
”+”数字为“+count++”；
}
提交
为此，您可以使用生成器功能

    function* loopFunction() {
        var i = 0;

        while (i < 5) {
            yield "<br>The number is " + i;
            i++;
        }
    }
    var iterator=loopFunction(); // init generator; no return
    function main(){
        var res=iterator.next(); // returns {value:<result>,done:false|true}
        if(!res.done)
            document.getElementById('text').innerHTML+=res.value;
        else
            document.getElementById('text').innerHTML+='<br />No more results';
        return false;
    }

    <button type="submit" style="width: 80px" name="submit" onclick="return main()">Submit</button> 
<!--"return" is important to avoid submission -->
    <p id="text"></p>

function*loopFunction（）{
var i=0；
而（i<5）{
产量“
数量为”+i；
i++；
}
}
var iterator=loopFunction（）；//初始化生成器；不归
函数main（）{
var res=iterator.next（）；//返回{value:，done:false | true}
如果（！res.done）
document.getElementById（'text'）.innerHTML+=res.value；
其他的
document.getElementById（'text'）.innerHTML+='
无更多结果'；
返回false；
}
提交

为什么不将循环的内容放入函数中，并在提交的每次单击事件中调用它？您可以在全局上下文中存储像
i
这样的变量，以便在每次调用时访问和修改它。我不明白这里迭代的目的：）单击按钮只是增加i变量，并打印数字为{i}的值？或者我不明白你想要什么do@michip96在全局上下文中存储变量是个坏主意。它可以作为缓存属性存储在函数中。将
i
变量连接到
text
变量在这里没有意义。如果要更新某些dom元素内容，请更改要链接到该dom对象的文本变量。嗨，Peter Leger！非常感谢你的帮助！这就是我要找的！你的主意很管用！！再次，非常感谢！！！嗨，亚历克斯·库德里亚舍夫！你的答案正是我想要的！我从你的代码中学到了很多！！！再次非常感谢！！！
var text = document.getElementById("text");
var i = 0;
function main() {
    text.innerHTML += "The number is " + i + "<br>";
    if(i > 5) {
        i = 0;
        text.innerHTML = "The number is " + i + "<br>";
    }
    i += 1;
}

    function* loopFunction() {
        var i = 0;

        while (i < 5) {
            yield "<br>The number is " + i;
            i++;
        }
    }
    var iterator=loopFunction(); // init generator; no return
    function main(){
        var res=iterator.next(); // returns {value:<result>,done:false|true}
        if(!res.done)
            document.getElementById('text').innerHTML+=res.value;
        else
            document.getElementById('text').innerHTML+='<br />No more results';
        return false;
    }

    <button type="submit" style="width: 80px" name="submit" onclick="return main()">Submit</button> 
<!--"return" is important to avoid submission -->
    <p id="text"></p>