Web page refreshes itself after I clicked a button. How could I avoid it?

Question

I'm currently learning the JS basics, and the sample code acts weird. When I press the button the two numbers from input "ar1" and "ar2" supposed to be added up, and displayed in the paragraph. For a moment I see the answer, but the webpage refreshes itself immediatly. What could cause it? Thanks for your answer!

...
    <body>
        <form>
            <input type="number" name="ar1"></br>
            <input type="number" name="ar2"></br>
            <button>go</button>
        </form>
        <p id="osszeg">Here is the answer</p>
        <script src="script.js"></script>
    </body>
    </html>

The script.js:

function osszead()
{
    let ar1 = parseInt(document.querySelector("input[name=ar1]").value);
    let ar2 = parseInt(document.querySelector("input[name=ar2]").value);

    let ossz = ar1 + ar2;

    document.querySelector("#osszeg").innerHTML = ossz;

}

see this answer. https://stackoverflow.com/questions/45634088/how-to-prevent-page-from-reloading-after-form-submit-jquery/45634140 — Goofballtech, Jul 05 '20 at 11:34

Dustin Detmore · Answer 1 · 2020-07-05T11:38:06.123

0

You need to add an onclick event and a type to your button.

<button type="button" onclick="osszead()">go</button>

edited Jul 05 '20 at 11:38

answered Jul 05 '20 at 11:32

Dustin Detmore

3
1

A note: when you edit someone else's post, don't add something like this _Edit: changed on click to onclick & fixed closed button tag_ **into the post itself**, just use the existing "Edit summary" field. The content in that field is available in the post edit history so anyone can read what you did. – Asons Jul 05 '20 at 11:48
@Ason I wouldn't have added that if there wasn't a 6 character minimum to edits, as the edit I had made was only 2 characters. – Dustin Detmore Jul 05 '20 at 12:48
I know the limitations...still, just don't add such stuff to a post. – Asons Jul 05 '20 at 12:52

score 0 · Answer 2 · edited Jul 05 '20 at 11:46

0

By default buttons are acting as "submit" type and submit types tend to reload the page. You can prevent the default behaviour using function passed(e){e.preventDefault();...}. <button type="button" onclick="osszead">go</button> might also work.

edited Jul 05 '20 at 11:46

Asons

84,923
12
110
165

answered Jul 05 '20 at 11:35

gautamits

1,262
9
11

score 0 · Accepted Answer · answered Jul 05 '20 at 11:36

You have to change your button type to "button" and put event onclick="osszead()". By default html button type is "submit" and as a default behaviour, clicking submit button submit it's data to it's action url.

<button type="button" onclick="osszead()">go</button>

D. Pardal · Answer 4 · 2020-07-05T11:49:21.713

This is happening because the button has a default type of submit because it's inside a <form>, which causes it to submit the form, effectively reloading the page.

You can either:

Not use any <form> at all:

<body>

    <input type="number" name="ar1"></br>
    <input type="number" name="ar2"></br>
    <button id="go-button">go</button>

    <p id="osszeg">Here is the answer</p>

    [...]

Set the button type explicitly:

<body>
    <form>
        <input type="number" name="ar1"></br>
        <input type="number" name="ar2"></br>
        <button id="go-button" type="button">go</button>
    </form>
    <p id="osszeg">Here is the answer</p>

Note that I added an id to the button, because you also need to add a click event listener. Add this to the end of your JavaScript code:

const btn = document.getElementById("go-button");
btn.addEventListener("click", osszead);

If one wants to avoid a submit, setting the `button` explicit to `type="submit"` won't solve that. Also, SO is full of answers and when a question can use one of those, you are supposed to _vote/flag to close as a duplicate_, not post an answer. — Asons, Jul 05 '20 at 11:43

Web page refreshes itself after I clicked a button. How could I avoid it?

4 Answers4