HTML　タグ属性　idでハマった話

あるwebサイトを開発中に自分の勘違いに気づいたため、残します。

事象

フォームに文字を入力し、送信ボタンを押すと、フォームの中身を空にしたいと考えました。
そこで、HTMLファイルには下記フォームを作りました。

  <div class="message-form">
    <%= form_with class: 'form', model: @message do |f| %>
      <%= f.text_field :text, class:"input-text", placeholder:"メッセージを入力してください（140文字まで)"%>
      <%= f.submit '送信', class:"submit-btn" %>
    <% end %>
  </div>

フォームの中身を削除するためにjavaScriptファイルを作成しました。

  const newMessage = document.getElementById('input-text');
  newMessage.value='';
  console.log('finished');

動作確認
文字入力後、送信ボタンを押したら、下記エラーが発生。このエラーを解決するまでに、時間を浪費してしまった。

Uncaught TypeError: Cannot set property 'value' of null

解決策

HTMLファイル内のテキストフィールドにidを設定していなかった。これによって、送信ボタンを押しても入力フォームの中身を空にできなかった。

  <div class="message-form">
    <%= form_with class: 'form', model: @message do |f| %>
      <%= f.text_field :text, id:"input-text", class:"input-text", placeholder:"メッセージを入力してください（140文字まで)"%>
      <%= f.submit '送信', class:"submit-btn" %>
    <% end %>
  </div>

できなかった原因

HTMLタグのid classの違いを理解していなかった

classをタグの属性として設定していれば、javascriptで取得できると勘違いしていた。

idとは

HTMLタグに設定できる属性である。しかし、同一のHTMLファイルではid名の重複はNG。
ただ、javascriptにてid取得したい場合は、設定する必要がある

classとは

HTMLタグに設定できる属性である。classは同一のHTMLファイルでは名前の重複はOK。