用新的删除 InnerHTML

Question

我正在尝试制作一个小型在线问答游戏，但我在使用 InnerHTML 元素时遇到了问题...如下所示，在脚本部分，我正在测试游戏对用户未放入任何内容的反应文本输入。它应该发出警报，它确实如此，而不是用红色字母显示 "Try again" 直到用户用他们的第二个答案再次点击我的脸。如果他们又错了，我希望它是同一件事，在屏幕上保留 "try again" 文本。但是，当我得到正确的答案时，我仍然可以看到绿色 "correct" 文本上方的红色 "try again" 文本，这是我不想要的，因为用户答对了，而且应该是只说 "correct"... 不包括任何带有红色再试一次文本的内容，只包括绿色。当用户得到正确答案或删除绿色 "Correct!" 文本时，如何让红色文本更改！没有任何红字的痕迹！？！谢谢！

这是我的代码

 <!DOCTYPE html>
 <html>
 <head>
 <link href="style.css" rel="stylesheet" type="text/css"/>
 <title>Question 1</title>
 <body bgcolor= "black"/>
 <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
 <center>
</head>

 <div id="headingq1">  
   <h1 id= "QNumber">Question #1</h1>  
   <h2 id="Question">About how many people live on planet Earth currently?</h2>  
   <input type="text" id="textboxOne"/>  
   <br>  
   <p id="checkAnswer">(To check your answer, click my face!)</p> 
   <img src="Steam Profile Photo2.png" onclick="answerOne()"/> 
   <br>  
   <p id="tryAgain"></p><p id="correct"></p>  
</div>

<script type="text/javascript">    
   function answerOne() {  
     var userValue = document.getElementById('textboxOne').value; 
     if (userValue.length == 0) {    
       alert('You cannot be serious right now...');
       document.getElementById('tryAgain').innerHTML = "Please Try Again";    
    }

    if (userValue === "7,000,000,000") {

        document.getElementById('correct').innerHTML ="Correct! And it is growing!";
        return;

     }  
  }

</script>
<footer id="copyrightfoot">Copyright &copy; 2015 KameCode Ltd. </footer>
</center>
</html>

Answer 1

如果输入的值为 7,000,000,000，您只需隐藏 'tryAgain' 元素

var profilePic = document.getElementById('profilePic'),
    userValue = document.getElementById('textboxOne'),
    tryAgain = document.getElementById('tryAgain'),
    correct = document.getElementById('correct');

profilePic.onclick = function(){
  console.log(userValue.value.length);

  if (!userValue.value.length) {    
    console.log('You cannot be serious right now...');
    tryAgain.innerHTML = "Please Try Again";    
  }

  if (userValue.value === "7,000,000,000") {
    tryAgain.style.display = 'none';
    correct.innerHTML = "Correct! And it is growing!";
  }  
}

<div id="headingq1">  
  <h1 id="QNumber">Question #1</h1>  
  <h2 id="Question">About how many people live on planet Earth currently?</h2>  
  <input type="text" id="textboxOne" />  
  <br>  
  <p id="checkAnswer">(To check your answer, click my face!)</p> 
  <img src="Steam Profile Photo2.png" id="profilePic" /> 
  <br>  
  <p id="tryAgain"></p><p id="correct"></p>  
</div>

Answer 2

<script type="text/javascript">
function validateSuccess(){

$("#elementId").html('new html');
}


</script>

当您根据游戏逻辑验证了正确的输入后调用 validateSuccess

用新的删除 InnerHTML

Deleting InnerHTML with new one

html

javascript

css

google-chrome

innerhtml