var score = 0, time = 1, heart = 3;
window.onload = function() {
var input = document.getElementById("wordTyped");
var timeLeft = document.getElementById("time");
var life = document.getElementById("life");
input.addEventListener("click", timer, false);
function timer() {
var id = setInterval(countdown, 10);
function countdown() {
input.removeEventListener("click", timer, false);
timeLeft.innerHTML = "Time left: " + (time - 0.01).toFixed(2) + "s";
time = 1 * (time - 0.01).toFixed(2);
if (time == 0 && life.innerHTML == "") {
clearInterval(id);
} else if (time == 0) {
--heart;
time = 1;
life(heart);
}
}
function life(heart) {
heart *= 1; // To make sure it is a number type
console.log(heart);
switch (heart) {
case 2:
life.innerHTML = "️️";
console.log(life.innerHTML);
break;
case 1:
life.innerHTML = "️";
console.log(life.innerHTML);
break;
case 0:
default:
life.innerHTML = "";
console.log(life.innerHTML);
break;
}
/*if(heart === 2) {
life.innerHTML = "️️";
}
else if(heart == 1) {
life.innerHTML = "️";
}
else {
life.innerHTML = "";
}*/
}
}
}
<div id="wordGenerated">illustration</div>
<input id="wordTyped" type="text" />
<div id="time">Time left: 1.00s</div>
<div id="score">Score: 0</div>
<div id="life">️️️</div>
Я не уверен, что не так в function life(heart)
.
Я пытаюсь уменьшить количество "️" на единицу, как на время 0 и вернуть его обратно к исходному значению, повторяя, пока heart
станет равным 0.
Если я использую life.innerHTML = " example "
вне области function timer()
, он будет работать.
Используя console.log()
, он показывает, что life.innerHTML
изменился, однако отображение HTML-документа остается таким же, и я не понимаю, почему.
Я пробовал .nodeValue
, .innerText
и .textContent
, и все еще дали тот же результат
Существует использование конфликта с функцией life
variable и life()
. Измените имя функции life()
на другое, например updateLife()
и ваш код работает,
Примечание. Вы не можете иметь одно и то же имя для переменной или функции или Объектов в пределах областей.
демонстрация
var score = 0, time = 1, heart = 3;
window.onload = function() {
var input = document.getElementById("wordTyped");
var timeLeft = document.getElementById("time");
var life = document.getElementById("life");
input.addEventListener("click", timer, false);
function timer() {
var id = setInterval(countdown, 10);
function countdown() {
input.removeEventListener("click", timer, false);
timeLeft.innerHTML = "Time left: " + (time - 0.01).toFixed(2) + "s";
time = 1 * (time - 0.01).toFixed(2);
if (time == 0 && life.innerHTML == "") {
clearInterval(id);
} else if (time == 0) {
--heart;
time = 1;
updateLife(heart);
}
}
function updateLife(heart) {
heart *= 1; // To make sure it is a number type
console.log(heart);
switch (heart) {
case 2:
life.innerHTML = "️️";
console.log(life.innerHTML);
break;
case 1:
life.innerHTML = "️";
console.log(life.innerHTML);
break;
case 0:
default:
life.innerHTML = "";
console.log(life.innerHTML);
break;
}
/*if(heart === 2) {
life.innerHTML = "️️";
}
else if(heart == 1) {
life.innerHTML = "️";
}
else {
life.innerHTML = "";
}*/
}
}
}
<div id="wordGenerated">illustration</div>
<input id="wordTyped" type="text" />
<div id="time">Time left: 1.00s</div>
<div id="score">Score: 0</div>
<div id="life">️️️</div>
есть конфликт между жизнью и жизнью, поэтому вы можете пойти как $ ("# life"). innerHTML = "" или что-то еще