如何使用JavaScript更新/更改HTML内容并防止页面刷新？

Question

我是一名脚本新手。我想用JavaScript更新HTML内容，但正如您所看到的那样，网页不断刷新。

我该如何防止页面刷新？

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>

- vinc

Answer 1

您的按钮应该是

<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
}

演示

- thecodeparadox

Answer 2

不要使用表单。您不需要向服务器提交任何表单数据。为了在浏览器中处理数据，您不需要表单。使用表单只会使事情变得更加复杂（尽管这些问题可以通过在元素中使用type=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（如果你只是使用输入元素的值并添加一些内容，则默认会发生这种情况）。

- Jukka K. Korpela

---

非常有帮助的解释，而且完美运行，非常感谢！ :) 但是，'elem' 到底是什么意思呢？ - vinc

在代码中，“elem”只是函数中的形式参数，可以被任何自由标识符替换。但是该参数的作用是它是表示HTML元素的对象。函数调用中对应的实际参数使用了一个通过其“id”值获取元素的方法。 - Jukka K. Korpela

Answer 3

其他人会解释如何使用jQuery，但这里将解释为什么它在您的原始代码中无法正常工作。 标签提交表单，因此您必须将其添加到表单标记内以防止表单提交：

<form onsubmit="return false">

顺便说一下，即使没有为表单指定明确的操作，它也会使用当前页面进行提交；很容易认为它没有任何操作。

- Ja͢ck

Answer 4

如果你定义了一个没有指定类型的 <button />，它会像一个 submit 按钮一样工作。只需要在按钮的标记中添加 type="button"，表单就不会被提交。

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

通过这个改变，你将不再需要任何return false或.preventDefault()的“变通方法”

- Andreas