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