Search code examples
javascriptcsshtmlgoogle-chromeinnerhtml

Deleting InnerHTML with new one

I am trying to make a little online quiz game and I am having problems with the InnerHTML element... As shown below, in the script section, I am testing out the games reaction to the user not putting anything in the text input. It is suppose to give an alert, which it does, than it says "Try again" in red letters UNTIL the user clicks my face again with their second answer. If they are wrong again I want it to be the same thing, keeping the "try again" text on the screen. But, when I get the answer right, I can still see the red "try again" text above the green "correct" text , which I don't want, because the user got it right, and it is suppose to say "correct" only... Not including anything with the red try again text, just the green. How can I make the red text change when the user gets the answer right or delete to the green "Correct!" Text! Without any traces of the red text!?! Thank you!

This is my code

 <!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>
Solution

  • you just have to hide the 'tryAgain' element if entered value is 7,000,000,000

    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>