CSS property changing then going back to initial value instantly

Question

I want to change the CSS properties permanently, in this example i want to hide the text 'Hide me' and show 'Show me' instead after clicking on the 'Next' button.

function Next() {
  document.querySelector('#hideme').style.display = 'none';
  document.querySelector('#showme').style.display = 'block';
}

#hideme {
  display: block;
}

#showme {
  display: none;
}

<form>
  <input type="text" name="text">
  <input type="submit" value="Next" onclick="Next()">
</form>
<div id="hideme">Hide Me</div>
<div id="showme">Show Me</div>

form input 'submit' type tends to reload the page, so stop the reload, r use a button. — beatmaister, Jul 03 '22 at 22:22

score 1 · Accepted Answer · answered Jul 03 '22 at 22:19

The issue is to do with your code using the <form> element and an <input type="submit">. By default, a form will try and 'post' information when using a 'submit' input.

As your form has no 'action' property, it triggers and reloads the page which gives the impression that there's an issue.

Change your HTML markup and use a <button> with your JavaScript function to change page(s).

   <div>
     <input type="text" name="text">
      <button onclick="Next()">Next</button>
      <input type="submit" value="Submit">
   </div>
  
   <div id="hideme">Hide Me</div>
   <div id="showme">Show Me</div>

CSS property changing then going back to initial value instantly

1 Answers1