Value disappears after click event

Question

I try to make a calculator with javascript with the onclick event I want the value of the button to convert an input text box. When I write the code the value of the button briefly in the text box , but it disappears instantly.

The code that i use can you find below this text, what am i doing wrong.
HTML:

    var iGetal = 0;
    function GetalRekenmachine()
    {
        iGetal = iGetal + 1;
        document.getElementById("Display").value = iGetal;
    }

 <button id="Cijfer7" value="7" onclick="GetalRekenmachine()">7</button>
    <input type="text" id="Display"/>

1

Is a page refresh happening? – tymeJV Mar 14 '16 at 13:21

epascarello · Accepted Answer · 2016-03-14T13:24:28.617

9

Because the default type of a button is submit. So either cancel the click action or set the type to be button.

<button id="Cijfer7" value="7" onclick="GetalRekenmachine(); return false;">7</button>

or

<button type="button" id="Cijfer7" value="7" onclick="GetalRekenmachine()">7</button>

edited Mar 14 '16 at 13:24

answered Mar 14 '16 at 13:22

epascarello

204,599
20
195
236

1

epascarello is right. By default the button will be submit button. On clicking it will submit and refresh the page – Aju John Mar 14 '16 at 13:23
Thanks for the help ! – Sandeerius Mar 14 '16 at 14:43

score 0 · Answer 2 · answered Mar 14 '16 at 13:25

var iGetal = 0;
    function GetalRekenmachine(event)
    {
        iGetal = iGetal + 1;
        document.getElementById("Display").value = iGetal;
        event.preventDefault()
    }

<button id="Cijfer7" value="7" onclick="GetalRekenmachine()">7</button>
    <input type="text" id="Display"/>

Value disappears after click event

2 Answers2

Linked