CODEWITHSUNDEEP
javascripthtml
MarisP
MarisP

Reputation: 987

Result from JS function shows up and dissapears

I have a JavaScript function:

function SaskaitisanasFunkcija(){
var x = document.forms[0].elements[0].value;
var y = document.forms[0].elements[1].value;
var saskaitisana = parseFloat(x)+parseFloat(y);
document.forms[0].elements[6].value = saskaitisana;}

And a form, that includes this:

<form>
Pirmais skaitlis: <input type="text"><br>
Otrais skaitlis: <input type="text"><br>
Matemātiskā darbība: 
<button onclick="SaskaitisanasFunkcija()">+</button>
<button onclick="AtnemsanasFunkcija()">-</button>
<button onclick="ReizinasanasFunkcija()">*</button>
<button onclick="DalisanasFunkcija()">/</button><br>
<b>Rezultāts</b><input type="text">
</form>

What happens is that when I press the button, that has the function "SaskaitisanasFunkcija()" attached to it, the result shows up in the "Rezultāts" input window (not sure how to call it any other way) and dissapears instantly. Can anyone explain why does that happen and give me a hint how to fix the problem?

Upvotes: 0

Views: 42

Answers (1)

Icepickle
Icepickle

Reputation: 12806

It happens because the form gets submitted and the page reloads, add the parameter type="button" to the button element

<button type="button" onclick="SaskaitisanasFunkcija()">+</button>

and the form should no longer submit and reload when you click it

Upvotes: 3

Related Questions