[Javascript] onclick 이벤트를 호출할 수 없습니다.

4859 단어 JavaScript초학자

개요


rails를 통해 프로그램을 만들고 있습니다.
Javascript를 사용하여 단추를 누르면 요소의 표시/숨김을 전환하려고 하지만 눌러도 움직이지 않습니다.
코드는 다음과 같습니다.
html.erb
  <button type=button id="info-btn">ログイン情報</button>  
  <div class="login-info" id="js-login-info">
   <p>アドレス:hoge パスワード:hogehoge</p>
  </div>
css
.login-info { 
  display: none;
}
click.js
document.getElementById("info-btn").onclick = function(){
  const loginInfo = document.getElementById("js-login-info");
  if(loginInfo.style.display=="block"){
    loginInfo.style.display = "none";
  }else{
    loginInfo.style.display = "block";
  };
};
application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../click")ここで該当のjsファイルを読み込む
미리 display: none에서 요소를 볼 수 없고 클릭한 타이밍에 값block으로 전환되지만 아무리 클릭해도 움직이지 않습니다...
콘솔을 확인한 후 Uncaught TypeError: Cannot set property 'onclick' of null 오류가 발생했습니다.

해결책


js 파일을 개별적으로 컴파일하고 참조해서 해결합니다.다음 기사를 참고하게 해주세요!
Ruby on Rails의 Javascript 파일 처리(Rails6)
구체적으로 다음과 같은 몇 가지를 변경했다.
・ js 파일의 위치를 app/javascript/click.js에서 app/javascript/packs/click.js로 변경
· 해당 보기 파일new.html.erb의 맨 아래에 추가<%= javascript_pack_tag 'click' %>검증 도구를 사용하여 확인한 후 <%=javascriptpack_"클릭 '% >"을 추가한 곳에서script 탭과 함께 컴파일된 js 파일을 읽었습니다.

최후


헤드 탭<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>에서 자바스크립트 파일을 읽기 때문에 바디 탭의 내용이 읽히기 전에 js 파일이 읽혀서 오류가 발생했죠.
문제는 이미 해결되었지만, 자신은 아직 해결하지 못했으니, 잘못된 점이 있으면 지적해 주십시오!

좋은 웹페이지 즐겨찾기