JavaScript功能后页面刷新

Question

在通过onClick按钮方法执行我的JS函数之后。 我的网站将刷新，用innerHTML编写的所有内容都将被删除。 我想我缺少了一些东西。 我将把整个JS函数放在这里。 我可能不了解某些东西，这就是造成它的原因。

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： 这是浏览器视图：

当我按“ V redu”（确定）后，一切又回到了开始，指示我在里面写一个数字。 我希望2 + 3 + 4 = 9留在那里吗？ 谢谢

Answer 1

更改：

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

至：

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

就像@Teemu所说的那样，<button>将提交一个表单元素。

Answer 2

另一种解决方案

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

和在JavaScript

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

这在其他情况下很有用，例如<a href元素的默认行为是重定向页面，因此您可以使用event.preventDefault()防止默认行为。

---

更好的解决方案-让您的按钮提交表单，但阻止表单提交时的默认设置

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

和在JavaScript

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

当在输入字段中输入Enter提交表单时，它将起作用。