tag appears and disappears?

Question

I have a very simple program that outputs a result using JS to a <p> tag. Whenever I run a result, the <p> tag appears and quickly disappears.

Code:

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>A2Q4</title>
   <link rel="stylesheet" href="style.css">
  </head>
 <body>
   <script>
    function NumberStats(number) {
      if(number.indexOf('soen287')>=0||number.indexOf('comp249')>=0||number.indexOf('assignment2')>=0) {
      number = number.replace(/soen287/gi,"SOEN287");
      number = number.replace(/comp249/gi,"COMP249");
      number =number.replace(/assignment2/gi,"ASSIGNMENT2");
      document.getElementById("p1").innerHTML ="&gt;&gt; "+number;
    } else{
      number=number.toUpperCase();
      document.getElementById("p1").innerHTML ="&gt;&gt; "+number;
    }
  }
   </script>
   <center>
   <br>
   <form name="myForm">
     <h1>Text detector<br/>A program created by Mohanad Arafe</h1>
     <input type="text" name="amount" placeholder="Enter your sentence"/>
     <button onclick="NumberStats(amount.value)">Try it</button>
     <p id="p1"></p>
   </form>
 </body>
</html>

Unmitigated · Accepted Answer · 2018-07-25T20:27:25.003

It is because the button is interpreted as a submit button, so it submits the form and refreshes the page. You need to prevent the default action of the form with event.preventDefault().

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>A2Q4</title>
   <link rel="stylesheet" href="style.css">
  </head>
 <body>
   <script>
    function NumberStats(number, e) {
     e.preventDefault(); if(number.indexOf('soen287')>=0||number.indexOf('comp249')>=0||number.indexOf('assignment2')>=0) {
      number = number.replace(/soen287/gi,"SOEN287");
      number = number.replace(/comp249/gi,"COMP249");
      number =number.replace(/assignment2/gi,"ASSIGNMENT2");
      document.getElementById("p1").innerHTML ="&gt;&gt; "+number;
    } else{
      number=number.toUpperCase();
      document.getElementById("p1").innerHTML ="&gt;&gt; "+number;
    }
  }
   </script>
   <center>
   <br>
   <form name="myForm">
     <h1>Text detector<br/>A program created by Mohanad Arafe</h1>
     <input type="text" name="amount" placeholder="Enter your sentence"/>
     <button onclick="NumberStats(amount.value, event)">Try it</button>
     <p id="p1"></p>
   </form>
 </body>
</html>

You can also change the button to <input type="button"> or <button type="button"> (as Xufox suggested in the comments) so it won't be misinterpreted by the browser as a submit button (<button type="submit">).

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>A2Q4</title>
   <link rel="stylesheet" href="style.css">
  </head>
 <body>
   <script>
    function NumberStats(number) { if(number.indexOf('soen287')>=0||number.indexOf('comp249')>=0||number.indexOf('assignment2')>=0) {
      number = number.replace(/soen287/gi,"SOEN287");
      number = number.replace(/comp249/gi,"COMP249");
      number =number.replace(/assignment2/gi,"ASSIGNMENT2");
      document.getElementById("p1").innerHTML ="&gt;&gt; "+number;
    } else{
      number=number.toUpperCase();
      document.getElementById("p1").innerHTML ="&gt;&gt; "+number;
    }
  }
   </script>
   <center>
   <br>
   <form name="myForm">
     <h1>Text detector<br/>A program created by Mohanad Arafe</h1>
     <input type="text" name="amount" placeholder="Enter your sentence"/>
     <input type="button" onclick="NumberStats(amount.value)" value="Try it">
     <p id="p1"></p>
   </form>
 </body>
</html>

@Xufox Thanks for telling me. I have edited my answer accordingly. — Unmitigated, Jul 25 '18 at 20:18

score 1 · Answer 2 · answered Jul 25 '18 at 20:26

The default behaviour of a button inside a form is:

<button type="submit"></button>

The browser implicitly makes this the type a button when it is inside a form even when you write your button without a type like this:

<button></button>

The submit will trigger a page refresh because a new HTTP request is send via the form. We can solve this easily in the following manner:

<input type="button"/>
<<button type="button"></button>

function NumberStats(number) {
  if (number.indexOf('soen287') >= 0 || number.indexOf('comp249') >= 0 || number.indexOf('assignment2') >= 0) {
    number = number.replace(/soen287/gi, "SOEN287");
    number = number.replace(/comp249/gi, "COMP249");
    number = number.replace(/assignment2/gi, "ASSIGNMENT2");
    document.getElementById("p1").innerHTML = "&gt;&gt; " + number;
  } else {
    number = number.toUpperCase();
    document.getElementById("p1").innerHTML = "&gt;&gt; " + number;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>A2Q4</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <center>
    <br>
    <form name="myForm">
      <h1>Text detector<br/>A program created by Mohanad Arafe</h1>
      <input type="text" name="amount" placeholder="Enter your sentence" />
      <input type="button" onclick="NumberStats(amount.value)" value="Try it">
      <p id="p1"></p>
    </form>
</body>

</html>

tag appears and disappears?

2 Answers2