我在这里尝试显示玩家在输入错误字母后剩余的生命数，如下所示:
但是，当玩家第二次输入错误的字母时，会出现这样的情况。我希望在同一行中替换更新后的生活。
这是我编写 livesCounter 的地方。
function livesCounter(){
var lives = document.createElement('DIV');
lives.innerHTML = "Lives Left:" + livecount;
lives.id = "livesCount";
hint.appendChild(lives);
if(livecount<1){
lives.innerHTML = "Game Over";
}
}
我试过像这样使用 inlineHTML，但结果是空的。
function livesCounter(){
var lives = document.getElementById('livesCount').innerHTML = '"Lives left:" + livecount';
hint.appendChild(lives);
if(livecount<1){
lives.innerHTML = "Game Over";
}
}
这是我的完整代码:
//THE HANGMAN GAME
var words = ['quaffle', 'bludger', 'pensieve', 'harry', 'lupin', 'butterbeer', 'polyjuice', 'patronus', 'horcrux', 'voldemort'];
var hints = ['A ball used in the wizarding game of quidditch thrown into one of the three goal hoops.', 'A ball bewitched to knock quiddich players of their brooms', 'A shallow metal basin used to review stored memories.', 'The boy who lived', 'The werewolf professor', 'A popular wizarding beverage',
'A potion that allows the drinker to assume the form of someone else', 'A complicated and powerful defensive charm', 'An object used to attain immortality',
'He Who Must Not Be Named'
];
correctletters = '';
missedletters = '';
livecount = 10;
counter = 0;
function getRandomWord() {
randomWord = words[Math.floor(Math.random() * words.length)];
wordlength = randomWord.length;
showHint();
livesCounter();
}
function drawDashes() {
elem = document.getElementById('lettercontainer');
for (var i = 0; i < wordlength; i++) {
var letterdash = document.createElement('DIV');
letterdash.classList = 'dash';
elem.appendChild(letterdash);
}
}
function getGuess() {
if (event.keyCode == 13) {
letterGuessed = document.getElementById("inputfield").value.toLowerCase();
document.getElementById("inputfield").value = null;
alert(randomWord);
r = randomWord.includes(letterGuessed);
alert(r);
if (r == true) {
correctletters = correctletters + letterGuessed;
alert("correct letters: " + correctletters);
} else {
missedletters = missedletters + letterGuessed;
alert("missed letters: " + missedletters);
}
guess = missedletters + correctletters;
replaceBlanks()
displayGuessedLetters();
}
}
function replaceBlanks() {
for (var j = 0; j < wordlength; j++) {
if (randomWord[j] === letterGuessed) {
div = elem.getElementsByTagName("DIV")[j].innerHTML = letterGuessed;
counter+=1;
alert(counter);
}
else{
livecount-=1;
}
}
}
function showHint() {
hint = document.getElementById("hintcontainer");
var wordIndex = words.indexOf(randomWord);
hint.innerHTML = hints[wordIndex];
}
function livesCounter(){
var lives = document.createElement('DIV');
lives.innerHTML = "Lives Left:" + livecount;
lives.id = "livesCount";
hint.appendChild(lives);
if(livecount<1){
lives.innerHTML = "Game Over";
}
}
function displayGuessedLetters() {
var content = document.createTextNode(letterGuessed);
var container = document.getElementById("guessedletters");
container.appendChild(content);
guessedletters.style.cssText = 'font-family: "Josefin Sans"; font-size: 30px; text-transform: uppercase; color: rgb(255, 85, 49); letter-spacing: 20px';
}
这是我的 HTML 代码:
<body>
<div id = inputcontainer>
enter a letter from <font color="orangered">A</font> to <font color="orangered">Z</font>:
<form onsubmit="return false">
<input maxlength = 1 id = inputfield onkeydown = "getGuess()" type="text">
</form>
guessed letters: <div id = guessedletters></div>
</div>
<div id = lettercontainer></div>
<div id = hintcontainer>
<div id = livesCount></div>
</div>
<script>getRandomWord(); drawDashes(); replaceBlanks(); checkLetter()</script>
</body>
最佳答案
您的 livesCounter 函数只会在每次调用时追加。它应该查看元素是否已经存在，并基于此创建元素并追加，或者只是更新 html。
var livesCountDiv = document.getElementById("livesCount")
if (livesCountDiv != null){
livesCountDiv.innerHTML = "Lives Left:" + livecount;
} else {
var lives = document.createElement('DIV');
lives.innerHTML = "Lives Left:" + livecount;
lives.id = "livesCount";
hint.appendChild(lives);
}
关于javascript - 如何用另一个替换 div 元素中的同一行 - javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53794165/