JavaScriptでクリアボタンを作る方法

方法1: フォームの値をリセットする HTMLのフォーム要素を使用して入力フィールドを作成し、JavaScriptでクリアボタンを押したときにフォームの値をリセットします。

<form id="myForm">
  <input type="text" id="name" value="">
  <input type="email" id="email" value="">
  <button type="button" onclick="clearForm()">クリア</button>
</form>
<script>
  function clearForm() {
    document.getElementById("myForm").reset();
  }
</script>

方法2: 入力フィールドの値を個別にリセットする 個々の入力フィールドの値を個別にリセットする方法もあります。以下は、JavaScriptで入力フィールドの値をクリアするコード例です。

<input type="text" id="name" value="">
<input type="email" id="email" value="">
<button type="button" onclick="clearFields()">クリア</button>
<script>
  function clearFields() {
    document.getElementById("name").value = "";
    document.getElementById("email").value = "";
  }
</script>

方法3: テキストエリアの値をリセットする テキストエリアの値をリセットするには、valueプロパティに空の文字列を設定します。

<textarea id="message"></textarea>
<button type="button" onclick="clearTextarea()">クリア</button>
<script>
  function clearTextarea() {
    document.getElementById("message").value = "";
  }
</script>

これらの方法を使用すると、JavaScriptを使ってWebページにクリアボタンを作成することができます。必要に応じて、他の要素や機能にも適用できます。