如何更新/更改HTML内容使用JavaScript和阻止该网页刷新？(How to update/c

我是一个新手到脚本。 我想更新HTML内容使用JavaScript，但你可以看到网页不断刷新。

我怎样才能阻止该网页刷新？

使用Javascript：

function showResult(form) {
var coba=form.willbeshown.value;
var coba2=coba+2;
document.getElementById("showresulthere").innerHTML=coba2;
}

HTML

<form>
<input type="text" name="willbeshown" value="">
<button onclick="showResult(this.form)">Ganti1</button>
</form>
<p id="showresulthere">Result will be shown here</p>
</body>

Answer 1:

不要使用形式的。 您还没有提交任何形式的数据到服务器。 为了处理在浏览器中的数据，你并不需要一个形式。 使用形式只是复杂的事情（尽管这些问题可以通过使用固定type=button在button元素，以防止它作为一个提交按钮）。

<input type="text" id="willbeshown" value="">
<button onclick=
  "showResult(document.getElementById('willbeshown'))">Ganti1</button>
<p id="showresulthere">Result will be shown here</p>
<script>
function showResult(elem) {
  document.getElementById("showresulthere").innerHTML = Number(elem.value) + 2;
}
</script>

我已经使用转换为数字， Number()因为我想你想添加2到字段值数值，例如42 + 2制作44，而不是作为一个字符串，42 + 2使422（这是在默认情况下，如果发生了什么您只需使用一个输入元素的值，并添加什么东西。

Answer 2:

您的按钮应

<button onclick="showResult(this.form); return false;">Ganti1</button>

使用Javascript

function showResult(form) {
  var coba=form.willbeshown.value;
  var coba2=coba+2;
  document.getElementById("showresulthere").innerHTML=coba2;
  return false; // prevent form submission with page load
}

DEMO

Answer 3:

其他人会解释你如何使用jQuery，但是这可以解释为什么它没有在原来的代码工作。

该<button>标签提交表单，所以你必须添加此表单标签，以防止表单提交里面：

<form onsubmit="return false">

顺便说一句，即使没有给你的身形一个明确的行动，它采用当前页面提交; 人们很容易认为它会不会没有行动做任何事情。

Answer 4:

如果你定义一个<button />而不定义它的类型，将工作就像一个submit按钮。 只需添加type="button" ，以您的按钮标记和形式将不会被提交。

<button type="button" onclick="showResult(this.form)">Ganti1</button>

随着这一变化，你将不再需要任何return false或.preventDefault() “变通”

文章来源: How to update/change HTML content with JavaScript and prevent the page from refreshing?