HTML JavaScript DOM操作innerHTMLクリア

Question

私は自分のHTMLを変更し、入力しているキーを追跡するシンプルなゲームを作成しています。私が特定のスコアを持っているとき、私が入力しているキーは私の段落の要素からクリアする必要がありますが、クリアされていません。私はinnerHTMLを使用して空の文字列と同じに設定しています。それは決してクリアされません。以下

var losses = 0; 
 
var guessesLeft = 10; 
 
var guesses = guessesLeft;  
 

 
document.onkeypress = function(event) { 
 

 
    var userChoice = event.key; 
 
    console.log("guesses" + guesses); 
 

 
    if (guesses === guessesLeft) { 
 
     console.log("Will this work" + userChoice); 
 
     document.getElementById('guess').innerHtml = ""; 
 
     var newContent = document.createTextNode(userChoice); 
 
    } else { 
 
     var newContent = document.createTextNode(', ' + userChoice); 
 
    } 
 
    console.log("newContent" + newContent[0]); 
 
    var newEl = document.createElement('span').appendChild(newContent); 
 
    document.getElementById('guess').appendChild(newEl); 
 

 
    if (guesses === 0) { 
 
     losses++; 
 
     document.getElementById('losses').innerHTML = ("Losses: " + losses); 
 
     guesses = guessesLeft; 
 
    } 
 
};

<div class="container"> 
 

 
<div class="row"> 
 

 
    <div class="col-lg-12 jumbotron"> 
 

 
     <h1> The Psychic Game </h1> 
 

 
    </div> 
 

 
</div> 
 

 
<div class="row"> 
 

 
    <div class="col-lg-4 one"> 
 

 

 

 
    </div> 
 

 
    <div class="col-le-4 content"> 
 

 
     <p> Guess what letter I'm thinking of? </p> 
 

 
     <p id="wins"> Wins: </p> 
 

 
     <p id="losses"> Losses: </p> 
 

 
     <p id="left"> Guesses Left: </p> 
 

 
     <div> 
 
      <p> Your guesses so far: <span id="guess"> </span></p> 
 

 
     </div> 
 

 
    </div> 
 
</div>

Answer 1

変更されたコードです。私が変更したのは、innerHtmlをinnerTextに変更し、ifのelse部分（推測=== 0）の条件に推測を追加しただけです。

こちらがお役に立てば幸いです。

var losses = 0; 
 
var guessesLeft = 10; 
 
var guesses = guessesLeft;  
 

 
document.onkeypress = function(event) { 
 

 
    var userChoice = event.key; 
 
    console.log("guesses" + guesses); 
 

 
    if (guesses === guessesLeft) { 
 
     console.log("Will this work" + userChoice); 
 
     document.getElementById('guess').innerText = ""; 
 
     var newContent = document.createTextNode(userChoice); 
 
    } else { 
 
     var newContent = document.createTextNode(', ' + userChoice); 
 
    } 
 
    console.log("newContent" + newContent[0]); 
 
    var newEl = document.createElement('span').appendChild(newContent); 
 
    document.getElementById('guess').appendChild(newEl); 
 

 
    if (guesses === 0) { 
 
     losses++; 
 
     document.getElementById('losses').innerHTML = ("Losses: " + losses); 
 
     guesses = guessesLeft; 
 
    } 
 
else 
 
\t guesses--; 
 
};

<div class="container"> 
 

 
<div class="row"> 
 

 
    <div class="col-lg-12 jumbotron"> 
 

 
     <h1> The Psychic Game </h1> 
 

 
    </div> 
 

 
</div> 
 

 
<div class="row"> 
 

 
    <div class="col-lg-4 one"> 
 

 

 

 
    </div> 
 

 
    <div class="col-le-4 content"> 
 

 
     <p> Guess what letter I'm thinking of? </p> 
 

 
     <p id="wins"> Wins: </p> 
 

 
     <p id="losses"> Losses: </p> 
 

 
     <p id="left"> Guesses Left: </p> 
 

 
     <div> 
 
      <p> Your guesses so far: <span id="guess"> </span></p> 
 

 
     </div> 
 

 
    </div> 
 
</div>