3

私はスクリプトの初心者です。HTML コンテンツを JavaScript で更新したいのですが、ご覧のように Web ページが更新され続けます。

ページが更新されないようにするにはどうすればよいですか?

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()しました。たとえば、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

タイプを定義せずに を定義すると、ボタン<button />のように機能します。submitボタンのマークアップに追加type="button"するだけで、フォームは送信されません。

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

return falseこの変更により、.preventDefault()「回避策」は必要ありません

于 2012-06-09T14:24:55.667 に答える