3

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

4 回答 4

2

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

于 2012-06-09T14:35:33.453 回答
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
}

演示

于 2012-06-09T14:15:06.793 回答
0

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

该<button>标签提交表单，因此您必须在表单标签中添加它以防止表单提交：

<form onsubmit="return false">

顺便说一句，即使没有为您的表单提供明确的操作，它也会使用当前页面提交；很容易认为它不采取行动就不会做任何事情。

于 2012-06-09T14:22:46.130 回答
0

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

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

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

于 2012-06-09T14:24:55.667 回答