暫停並繼續變量遞增

Question

我需要在 var i 達到 25 時暫停遞增，並在按下提交按鈕時繼續遞增。 抱歉亂碼。 是否有更簡單的方法來插入換行符？ 感謝您抽出時間提供幫助。
代碼筆鏈接

 var p = document.getElementsByClassName('num'), resetBtn = document.getElementById('reset'), nameTxt = document.getElementsByTagName('input')[0], nameSubmit = document.getElementById('submit') var i = 0 var text = "Hello. What is your name?" var breaks = [6] var name = "" setInterval(function(){ if (breaks.includes(i) == true){ p[0].innerHTML += "<br>" } else { p[0].innerHTML += text.charAt(i) } i++ if (i == 25){ nameTxt.style.visibility = "visible" nameSubmit.style.visibility = "visible" } },100) resetBtn.onclick = function(){ i = 0 p[0].innerHTML = "" } nameTxt.style.visibility = "hidden" nameSubmit.style.visibility = "hidden" nameSubmit.onclick = function(){ name = nameTxt.value nameTxt.style.visibility = "hidden" nameSubmit.style.visibility = "hidden" }

 @import url(https://fonts.googleapis.com/css?family=Press+Start+2P); body{ font-family: 'Press Start 2P',serif; background: black; color: limegreen } button{ width: 100px; height: 25px; font-family: 'Press Start 2P',serif; background: black; color: limegreen; border-color: limegreen; cursor: pointer } input{ width: 100px; height: 25px; font-family: 'Press Start 2P',serif; background: black; color: limegreen; border-color: limegreen; cursor: pointer; }

 <text class="num"></text> <input><button id="submit">Submit</button> <br> <button id="reset">Reset</button>

重啟

Answer 1

使用標志

var p = document.getElementsByClassName('num'),
        resetBtn = document.getElementById('reset'),
        nameTxt = document.getElementsByTagName('input')[0],
        nameSubmit = document.getElementById('submit')
var i = 0
var text = "Hello. What is your name?"
var breaks = [6]
var name = ""
var btnClicked = false;

setInterval(function(){
    if (breaks.includes(i) == true){
        p[0].innerHTML += "<br>"
    } else {
    p[0].innerHTML += text.charAt(i)
    }
    if (btnClicked || i < 25) i++;
    if (i == 25){
        nameTxt.style.visibility = "visible"
        nameSubmit.style.visibility = "visible"
    }
},100)

resetBtn.onclick = function(){
    i = 0
    p[0].innerHTML = ""
}
nameTxt.style.visibility = "hidden"
nameSubmit.style.visibility = "hidden"

nameSubmit.onclick = function(){
        btnClicked = true;
    name = nameTxt.value
    nameTxt.style.visibility = "hidden"
    nameSubmit.style.visibility = "hidden"
}