时间戳

首页 > 解决方案 > 如何用另一个替换div元素中的同一行 - javascript

javascript - 如何用另一个替换div元素中的同一行 - javascript

问题描述

在这里，我试图显示玩家在输入错误字母后剩下的生命数量，如下所示：

在此处输入图像描述

但是，当玩家第二次输入错误的字母时，就会出现这样的情况。我希望在同一行替换更新的生命。

在此处输入图像描述

这是我编写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>

标签： javascripthtml

解决方案

您的 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);
}

推荐阅读