Javascript - div innerHTML 不会改变答案

【问题标题】：Javascript - div innerHTML does not changeJavascript - div innerHTML 不会改变
【发布时间】：2018-04-19 12:00:10
【问题描述】：

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 时将“❤️”的数量减少 1 并重置为其原始值，重复直到 heart 等于 0。

如果我在function timer() 范围之外使用life.innerHTML = " example "，它将起作用。

使用console.log()，显示life.innerHTML 发生了变化，但是HTML文档的显示保持不变，我不明白为什么。

我尝试了.nodeValue、.innerText 和.textContent，结果仍然相同

【问题讨论】：

你不能像那样在代码中添加表情符号，使用 html 快捷方式，比如“💓”
“你不能只添加表情符号”我笑着说。严肃地说，由于某种原因它仍然没有改变
@Teemu 我使用 Bracket，我知道它与 Atom、Electron 等相比并不专业，但我认为现在就足够了。我还是个新手

标签： javascript function dom switch-statement innerhtml

【解决方案1】：

life 变量和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>

【讨论】：

【解决方案2】：

生活和生活功能之间存在冲突，因此您可以像 $("#life").innerHTML="" 或其他任何东西

【讨论】：