[英]Javascript - div innerHTML does not change
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。
如果我在function timer()
范圍之外使用life.innerHTML = " example "
,它將起作用。
使用console.log()
,它表明life.innerHTML
已更改,但是HTML文檔的顯示保持不變,我不明白為什么。
我已經嘗試過.nodeValue
, .innerText
和.textContent
,但它們仍然給出相同的結果
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>
生活和生活功能之間存在沖突,因此您可以像$(“#life”)。innerHTML =“”或其他任何東西
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.