javascript テキストエリアの値をクリアする

作成日 2022.10.01
更新日 2022.11.07
javascript
javascript

javascriptで、テキストエリアの値をクリアするサンプルコードを記述してます。取得した「value」に空文字を指定することでクリアすることができます。ここでは複数の要素を一括でクリアする手順も記述してます。

1. 環境
2. クリア方法
3. 存在チェック
4. 複数の要素を一括でクリア
5. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 107.0.5304.88

Javascript サンプル集はこちら

クリア方法

「value」を空にすることで、値をクリアすることができます。

<form name="frm">
  <textarea name="bar"></textarea>
</form>

<button id="btn">clear</button>

<script>

document.getElementById("btn").addEventListener('click', function (){
  document.getElementsByName("bar")[0].value = '';
});

</script>

実行結果

存在チェック

存在しない要素をクリアしようとするとエラーとなります。

<form name="frm">
  <textarea name="bar"></textarea>
</form>

<button id="btn">clear</button>

<script>

document.getElementById("btn").addEventListener('click', function (){
  document.getElementsByName("noelm")[0].value = '';
  //Uncaught TypeError: Cannot set properties of undefined (setting 'value')
});

</script>

存在チェックをしておくとエラーは回避できます。

document.getElementById("btn").addEventListener('click', function (){
  
  if(document.getElementsByName("noelm") !== null){
    document.getElementsByName("noelm")[0].value = '';
  }

});

複数の要素を一括でクリア

例えば「name」名を指定して、一括でクリアする場合は以下のように「forEach」を使用します。
※「NodeList」は「forEach」が使用できます。

<form name="frm">
  <textarea name="bar"></textarea>
  <textarea name="bar"></textarea>
  <textarea name="bar"></textarea>
</form>

<button id="btn">clear</button>

</div>

<script>

document.getElementById("btn").addEventListener('click', function (){

  const arr = document.getElementsByName("bar");

  arr.forEach(function(v){ v.value = '' });

});

</script>

実行結果

サンプルコード

以下は、「実行」ボタンをクリックすると、テキストエリアに入力された文字列をクリアするサンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数を使用してます。

document.getElementByIdの省略して記述する

アロー関数の使い方

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>
  <div id="foo" class="container text-center w-25" style="margin-top:150px">

    <h2><span id="result" class="badge badge-info">実行結果</span></h2>

    <textarea id="txt" class="form-control rounded-0"></textarea>

    <button id="btn" type="button" class="btn btn-info btn-rounded mt-1">
      実行
    </button>

  </div>

  <script>    

    btn.onclick = () => {      

      txt.value = '';

    }
    
  </script>
</body>

</html>

クリアされていることが確認できます。