Выполнение итерации каждой буквы в строке на кнопку нажмите

Question

Когда я нажимаю одну кнопку, я намереваюсь отображать символ из заданной строки. например: первый клик => первая буква, вторая нажмите => второе письмо и т.д.

Это код, который я попробовал:

<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

Try размещения 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>