Value disappears after click event [duplicate]

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

Is a page refresh happening?

tymeJV
– tymeJV

2016-03-14 13:21:24 +00:00
Commented Mar 14, 2016 at 13:21 — tymeJV
– tymeJV, Commented Mar 14, 2016 at 13:21

epascarello · Accepted Answer · 2016-03-14 13:24:28Z

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, 2016 at 13:24

answered Mar 14, 2016 at 13:22

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aju John Over a year ago

epascarello is right. By default the button will be submit button. On clicking it will submit and refresh the page

Sandeerius Over a year ago

Thanks for the help !

Zamboney · Accepted Answer · 2016-03-14 13:25:10Z

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

Collectives™ on Stack Overflow

Value disappears after click event [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related