[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.jsdocument.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.jsrequire("@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 파일이 읽혀서 오류가 발생했죠.문제는 이미 해결되었지만, 자신은 아직 해결하지 못했으니, 잘못된 점이 있으면 지적해 주십시오!
Reference
이 문제에 관하여([Javascript] onclick 이벤트를 호출할 수 없습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/take95/items/a46dcb882efa56de6c19텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)