JavaScript - div innerHTML не меняется

1

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, и все еще дали тот же результат

  • 1
    Вы не можете просто добавить смайлики в код, например, используйте для них ярлык html, например "& # x1F493;"
  • 0
    «Вы не можете просто добавить смайлики», - ответил я. На серьезной ноте, это все еще не изменилось по некоторой причине
Показать ещё 1 комментарий
Теги:
switch-statement
function
dom
innerhtml

2 ответа

2
Лучший ответ

Существует использование конфликта с функцией 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>
1

есть конфликт между жизнью и жизнью, поэтому вы можете пойти как $ ("# life"). innerHTML = "" или что-то еще

Ещё вопросы

Сообщество Overcoder
Наверх
Меню