Question

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

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

在这里我编码了lifesCounter。

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>

Answer 1

您的lifeCounter函数仅在每次调用时追加。它应该查看该元素是否已经存在，并在此基础上创建该元素并附加，或简单地更新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);
}

Answer 2

function livesCounter() {

$("#livesCount").remove();
var lives = document.createElement('DIV');
lives.innerHTML = "Lives Left:" + livecount;
lives.id = "livesCount";
hint.appendChild(lives);

if(livecount<1){
    lives.innerHTML = "Game Over";
   }   
}

您可以使用jquery尝试上面的代码

Answer 3

将def run_task(**kwargs): print(kwargs["dag_run"].conf["override"]函数更改为：

livesCounter

var livecount=9;
var hint = document.getElementById("main");

livesCounter(livecount);

function livesCounter(livecount){
    var a = document.getElementById("livesCount");
    if(a)
    {
      a.innerHTML = "Lives Left:" + livecount;
    }
    else
    {
    var lives = document.createElement('DIV');
    lives.innerHTML = "Lives Left:" + livecount;
    lives.id = "livesCount";
    hint.appendChild(lives);

    if(livecount<1){
        lives.innerHTML = "Game Over";
    }   
    }
}


function myFunction(data){
livesCounter(data);
}

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

3 个答案: