Пауза и продолжение увеличения переменной - PullRequest
Новая
       7

Пауза и продолжение увеличения переменной

2 голосов
/ 08 января 2020

Мне нужно приостановить приращение переменной i, когда оно достигнет 25, и продолжить приращение, когда нажата кнопка «Отправить». Извините за грязное кодирование. И был бы более легкий способ вставить разрывы строки? Спасибо, что нашли время вне дня, чтобы помочь.
Ссылка на Codepen 

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>

Сброс

1 Ответ

1 голос
/ 08 января 2020

Использовать флаг 

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"
}
...