2017-11-07 1 views
1

자바 스크립트 - DIV innerHTML을 내가 <code>function life(heart)</code> 내 잘못이 무엇인지 확실하지 않다

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>

변경되지 않습니다. 나는 시간이 0에 충돌로 하나 '❤️'의 양을 줄이고 내가 function timer() 외부 life.innerHTML = " example "를 사용하는 경우 heart은 0

에 달할 때까지 반복 원래 값으로 다시 재설정하기 위해 노력하고있어

범위, 그것은 작동합니다.

console.log()를 사용하면, 이 변경 life.innerHTML 그러나, HTML 문서의 디스플레이가 동일하게 유지하고 내가 왜 이해하지 못하고 있음을 보여준다.

내가 .nodeValue을 시도했습니다

, .innerText.textContent, 모든 여전히 같은 결과

+1

코드에 emojis를 추가 할 수는 없지만 "& # x1F493;"과 같은 html 바로 가기를 사용하십시오. – Teemu

+0

"당신은 단지 emojis를 추가 할 수 없습니다."라고 loled. 진지한 메모에서, 그것은 여전히 ​​어떤 이유로 든 바뀌지 않았다. –

+0

@Teemu 나는 Bracket을 사용한다. 나는 Atom, Electron 등등에 비해서 전문적인 것이 없다는 것을 안다.하지만 지금은 충분하다고 생각한다. 나는 아직도 이것에 초보자이다. –

답변

2

life 변수 life() 기능과 충돌 사용량이있다했다. , updateLife() 및 코드의 작품과 같은 다른 것으로

참고 life() 함수 이름을 변경합니다 당신은 범위 내에서 변수 나 함수 또는 객체에 대해 같은 이름을 가질 수 없습니다. 다른

데모

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>

0

당신이 $처럼 ("# 수명")를 갈 수 있도록 삶과 생활 기능 사이에 충돌이. innerHTML을 = ""또는 어떤 일

관련 문제