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

How to update/change HTML content with JavaScript and prevent the page from refreshing?

本文关键字：刷新 JavaScript 何使用 更新 HTML 更改      更新时间：2023-09-26

我是脚本编写的新手。 我想用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>

根本不要使用表单。您没有向服务器提交任何表单数据。要在浏览器中处理数据，您不需要表单。使用表单只会使事情复杂化（尽管可以通过在 button 元素中使用 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（如果您只是使用输入元素的值并向其添加一些内容，则默认情况下会发生这种情况。

你的按钮应该是

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

爪哇语

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
}

演示

其他人将解释你应该如何使用jQuery，但这将解释为什么它在原始代码中不起作用。

<button> 标记提交表单，因此您必须将其添加到表单标记中以防止表单提交：

<form onsubmit="return false">

顺便说一句，即使没有给你的表单一个明确的操作，它也使用当前页面提交;很容易认为它不会在没有操作的情况下做任何事情。

如果您定义<button />而不定义其类型，它将像submit按钮一样工作。只需将type="button"添加到按钮标记中，表单就不会提交。

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

通过此更改，您将不需要任何return false或.preventDefault()"解决方法"

相关文章：