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

-1

例如，下面的代码，只需点击一下鼠标，打印这样的：

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>

的JavaScript

function main() { 
    document.getElementById("text").innerHTML = loopFunction(); 
} 

function loopFunction() { 
    var text = ""; 
    var i = 0; 
    while (i < 5) { 
     text += "<br>The number is " + i; 
     i++; 
    } 

    return text; 
}

我想点击“提交”按钮，并运行在一个时间循环一次迭代（步骤）：

例如：

click "submit" = The number is 0 
click "submit" = The number is 1 
click "submit" = The number is 2 
click "submit" = The number is 3 
click "submit" = The number is 4

来源

2016-05-07 Vic

为什么你不把你的循环的内容放在一个函数中，并在提交的每一个点击事件中调用它？您可以在全局环境中存储像'i'这样的变量，以便在每次调用时访问和修改它。 – michip96

我不明白在这里迭代的目的:)按钮点击只是增加我的变量，并打印数量是{我}？或者我不明白你想要做什么 –

@ michip96在全局上下文中存储变量是一个坏主意。它可以作为缓存属性存储在函数中。 – Ashot

您可以使用生成器功能来达到此目的。

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>

来源

2016-05-07 20:27:16

嗨Alex Kudryashev！你的回答正是我想要的！我用你的代码了解了很多！再次感谢！ – Vic

更改函数这样。

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; 
}

来源

2016-05-07 19:15:08 Ashot

在'text'变量中连接'i'变量在这里没有任何意义。如果您要更新一些dom元素内容，请将文本变量更改为链接到该dom对象。 – Ashot

没有必要使用循环。把i外面的功能和增量它在的功能。设置i为0，如果它是大于5

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; 
}

JSFiddle

来源

2016-05-07 20:15:28 Sun

嗨，彼得莱格！非常感谢你的帮助！这就是我一直在寻找的！你的想法很棒！再次，非常感谢！ – Vic

如果所有要完成的是做一个迭代的时间，为什么重复呢？

您可以简单地使用全球variable来保留您的计数值。

var count = 0; 
 
     
 
function main() { 
 
    var textElement = document.getElementById("text"); 
 

 
    if (count >= 5) { 
 
     count = 0; 
 
     textElement.innerHTML = ""; 
 
    } 
 

 
    textElement.innerHTML += "<br>" + "The number is " + count++; 
 
}

<button type="submit" style="width: 80px" name="submit" onclick="main();">Submit</button> 
 
<p id="text"></p>

这将使你The number is X为每次点击;如上面的代码片段所示。

除非我误解了你的难题，这似乎是你正在寻找的解决方案。

来源

2016-05-07 20:18:39

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

回答

相关问题