Question

每当我按下一个按钮时，我打算从给定的字符串中显示一个字符。例如：第一次点击=＆gt;第一个字母，第二次点击=＆gt;第二封信等等。

这是我尝试过的代码：

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

        function myFunction() {
        var str = "This is a random string";
    for(i = 0; i < str.length; i++){
        var n = str.charAt(i);
    document.getElementById("demo").innerHTML = n
  };
}

虽然迭代遍历整个字符串，但是我编写的代码的不需要的结果仅在我单击按钮时显示最后一个字母。我错过了什么？

Answer 1

使用全局计数器。

var counter = 0;
var str = "This is a random string";
document.getElementById("fnc").onclick = myFunction;
function myFunction() {
  var n = str.charAt(counter);
  counter++;
  if (counter == str.length)
    counter = 0;
  document.getElementById("demo").innerHTML = n;
}

这里是JSFiddle。

Answer 2

尝试在str

之外放置#demo，myFunction的引用

var str = "This is a random string",
  curr = -1,
  demo = document.getElementById("demo");

function myFunction() {
  if (curr < str.length -1) {
    var n = str.charAt(++curr);
    demo.innerHTML += n;
  }
}

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

Answer 3

您正在点击处理程序中运行整个字符串。相反，您应该创建一个只增加i一次的点击处理程序。这是一种方法：

var myFunction = function ( ) {
    var str = "This is a random string";
    var i = 0;

    return function ( ) {
        if ( i < str.length )
            document.getElementById( "demo" ).innerHTML = str[i++];
    };
}( );

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

对每个按钮的字符串中的每个字母进行迭代，然后单击

3 个答案: