HTML 태그 속성 id로 빠지면

어떤 웹페이지를 개발할 때 자신의 오류를 발견했기 때문에 남는다.

이벤트

폼에 텍스트를 입력하고 발송 단추를 누르면 창의 내용을 비우고 싶습니다.
따라서 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 차이를 이해하지 못했습니다.

클래스를 탭의 속성으로 설정하면 자바스크립트를 통해 얻을 수 있다고 착각합니다.

아이디

는 HTML 태그에 설정할 수 있는 속성입니다.그러나 같은 HTML 파일의 id 이름은 중복될 수 없습니다.
단, 자바스크립트를 통해 id를 얻으려면 설정이 필요합니다

class 소개

는 HTML 태그에 설정할 수 있는 속성입니다.class가 같은 HTML 파일에서 이름이 중복되면 OK입니다.