how to make the show function in an if else override the hide function permanently?

Question

in this code I want the show function (correct or incorrect answer) to last but it always reverts to hide

$("#correctOne").hide();
$("#incorrectOne").hide();

function myFunction() {
  var inputOne = $("#inputOne").val();
  if (inputOne == 10) {
    $("#correctOne").show();
    //confirm("Correct");
  } else {
    $("#incorrectOne").show();
    //confirm("Incorrect");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>What number am I thinking of?</h1>
<p>Divide me by four and my remainder is two. I am net if you see me through the looking glass.</p>
<form>
  <input id="inputOne" type="text" placeholder="Answer Here">

  <button onclick="myFunction()">submit</button>
</form>
<h2 id="correctOne">Yes!</h2>
<h3 id="incorrectOne">Nope!</h3>


Show source
| javascript   | jquery   | html   2017-01-07 10:01 2 Answers

Answers ( 2 )

  1. 2017-01-07 10:01

    Add a type to button in your button markup:

    <button type="button" onclick="myFunction()">submit</button>
    

    Why?

    Because default functionality of the button is to submit the form and your form gets submitted when you click the button and due to postback your elements get hidden as doc ready fires again.

    1. click button.
    2. calls the function and executes the code.
    3. form submission happens.
    4. postback happens page again reloads.
    5. hiding of elements again gets fired.

    Even you can simplify this with .toggle(boolean):

    $("#correctOne").hide();
    $("#incorrectOne").hide();
    
    function myFunction() {
      var inputOne = $("#inputOne").val();
    
      $("#correctOne").toggle(inputOne == 10); // .toggle(true) to show
      $("#incorrectOne").toggle(inputOne != 10); // .toggle(false) to hide
    
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <h1>What number am I thinking of?</h1>
    <p>Divide me by four and my remainder is two. I am net if you see me through the looking glass.</p>
    <form>
      <input id="inputOne" type="text" placeholder="Answer Here">
    
      <button type="button" onclick="myFunction()">submit</button>
    </form>
    <h2 id="correctOne">Yes!</h2>
    <h3 id="incorrectOne">Nope!</h3>

  2. 2017-01-07 10:01

    You need first to hide both of them inside a function body.

      
    $("#correctOne").hide();
    $("#incorrectOne").hide();
    
    function myFunction() {
    $("#correctOne").hide();
    $("#incorrectOne").hide();
    var inputOne = $("#inputOne").val();
    if (inputOne == 10) {
    $("#correctOne").show();
    //confirm("Correct");
    } else {
    $("#incorrectOne").show();
    //confirm("Incorrect");
    }
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <h1>What number am I thinking of?</h1>
    <p>Divide me by four and my remainder is two. I am net if you see me through the looking glass. </p>
    <form>
    <input id="inputOne" type="text" placeholder="Answer Here">
    
    <button onclick="myFunction()">submit</button>
    </form>
    <h2 id = "correctOne">Yes!</h2>
    <h3 id = "incorrectOne">Nope!</h3>

◀ Go back