JavaScript功能后页面刷新

Question

After I excecute my JS function over onClick button method. My site refreshes and everything that was writen with innerHTML is erased. I think i'm missing something. I will just put the whole JS function here. I probably don't understand something and that's what is causing it.

function stisk() {
  var stevilo = prompt("Vnesi iskano stevilo");
  var seznam = document.getElementById("vnos").value;
  var pattern = new RegExp("^[0-9](,\s*[0-9])+$");
  var vsota = 0;
  var seznam = seznam.split(',');

  var dolzina = seznam.length;
  var pravilnost = pattern.test(seznam);
  if (pravilnost == true) {
    for (i = 0; i < dolzina; i++) {
      vsota = vsota + parseInt(seznam[i]);
    }
    for (i = 0; i < dolzina - 1; i++) {
      var star = document.getElementById("stevila").innerHTML;
      if (isNaN(seznam[i]) == false) {
        var starejsi = document.getElementById("stevila").innerHTML = star + parseInt(seznam[i]) + "+";
      } else {
        document.getElementById("stevila").innerHTML = "Vnos ni pravilen";
      }
    }
    document.getElementById("stevila").innerHTML = starejsi + seznam[dolzina - 1] + "=" + vsota;
    var c = 0;
    for (i = 0; i < seznam.length; i++) {
      if (stevilo == seznam[i]) {
        c++;
      }
    }
    if (c == 0) {
      alert("stevila ni na seznamu");
    } else {
      alert("Stevilo je na seznamu");
    }
  } else {
    document.getElementById("stevila").innerHTML = "Napacen vnos stevil";
  }
}

HTML: Here is the browser view:

After i press "V redu" (OK) Everything goes back to the start, expacting me to write a number inside. I want the 2+3+4=9 to stay there if that is possible? Thanks

Answer 1

Change:

<button onclick="stisk()">OK</button>

to:

<input type="button" onclick="stisk()">OK</input>

Like @Teemu said, < button > will submit a form element.

Answer 2

Another solution

<button onclick="stisk(event)">OK</button>

and in javascript

function stisk(e){
    e.preventDefault();
    ...

This can be useful in other cases, like default behavior of <a href element is to redirect page, so you can prevent default behavior with event.preventDefault()

---

even better solution - let your button submit form, but prevent default on form submit

<form onsubmit="stisk(e)">
    ...
    <button type="submit">

and in javascript

function stisk(e){
    e.preventDefault();
    ...

and it will work when submitting form with Enter in input field.