Can't Update Inner Html With Jquery, It Turns Back Immediately

I have been trying to make this very simple feature work where the user clicks the submit button and the question number is updated. On the browser when I click the button the que

Solution 1:

Because the page is reloading when you submit the form.

The default submit action for a <form> is the current URL when not otherwise specified. And the default type for a <button> within a <form> is submit when not otherwise specified. Though in this case you are explicitly specifying type="submit". So essentially your markup is explicitly indicating that you want to reload the page when clicking the button.

Since you're not intending to post a form, you can simplify the HTML and remove the <form> elements and make the button no longer a submit button:

<h1id="question">Question 1</h1><h3>What is your name?</h3><textareatype="text"name="answer"rows="3"cols="50"></textarea><br><buttonclass="btn btn-outline-primary btn-lg"name="submit">Submit</button>

If for some other reason you want/need to keep the <form> (styling perhaps? though since it's not semantically a "form" then I'd recommend using something else, like a <div>) then you can at least specify type="button" to prevent default submit behavior:

<button class="btn btn-outline-primary btn-lg"type="button" name="submit">Submit</button>

Solution 2:

The default type of button is submit even if you have not written but you also have specified it.

So what happens to your code :

Your function executes, we see the result and it reload as the type='submit' behaviour.

Make it type='button' not removing the type attribute.

And another thing i can see is you dont need to call $(document).ready() because it is not a function which is needed as the html loads.