JavaScriptでのリセット機能の実装方法


  1. ページのリロード: 最も簡単な方法は、ページをリロードすることです。以下のコードを使用すると、現在のページがリロードされます。
location.reload();
  1. フォームのリセット: フォーム内の入力値をリセットするには、reset()メソッドを使用します。以下のように、フォーム要素に対してreset()メソッドを呼び出すことで、フォームがリセットされます。
<form id="myForm">
  <!-- フォームの要素 -->
  <input type="text" name="username" value="John Doe">
  <input type="email" name="email" value="[email protected]">

  <!-- リセットボタン -->
  <button type="reset" onclick="resetForm()">リセット</button>
</form>
<script>
function resetForm() {
  document.getElementById("myForm").reset();
}
</script>
  1. 特定の要素の値をリセット: 特定の要素の値をリセットするには、その要素の値を初期値に戻す必要があります。以下のようなコードを使用して、特定の要素(例: テキストボックス)の値をリセットできます。
<input type="text" id="myInput" value="初期値">
<button onclick="resetInput()">リセット</button>
<script>
function resetInput() {
  document.getElementById("myInput").value = "初期値";
}
</script>

これらは、JavaScriptを使用してリセット機能を実装するいくつかの基本的な方法です。プロジェクトの要件に応じて、これらのコード例をカスタマイズして使用することができます。