How do I stop the browser in the HTML compiler from deleting it's content?

Question

The question isn't worded great. The issue i'm having is when I use the submit button or any button to make a change to the 'website' using JavaScript, after the change happens, the content of the browser, like buttons or paragraphs or etc. just disappear and i'm left with a blank browser in the compiler. I need help fixing this.

Here's an example of the issue, just put any color or none and watch the browser disappear for no reason: https://www.sololearn.com/en/compiler-playground/Wg07JxEyTJBP

https://www.sololearn.com/compiler-playground/Wg07JxEyTJBP/?ref=app

Answer 1

It is because the default behavoir of a form is to submit and direct to another page. You may prevent the default behavior by adding
event.preventDefault(); to your function.

Answer 2

well i cant see your code because of the '/en/' mobile bug but if you're using the form tag, add the attribute: onsubmit="return false"

or in js you can select the form and onsubmit prevent the default action

Answer 3

Remove the :::

<form id="f">
<input type="text" id="color">
<br>
<button
onclick="changeColor()">
change color</button>
</form>

And only use the :::

<input type="text" id="color">
<br>
<button
onclick="changeColor()">
change color</button>

It works and won't clear or reset