エラー)空の解決済みCannot read属性(getElementById VS querySelector差異)

10343 ワード
テキストリンク
今日JSとHTMLを使ってログインとOpenAPIを使ったムービー出力画面を作成する際に、ログインボタンが正常に動作しているか確認するために、ボタンにconsoleを使って正常に動作しているか確認する際に、次のようなエラーが出力されました.
もちろん、ボタンも正常に機能していません.
Cannot read properties of null(setting 'onclick)
多くの検索(検索や専門MDNなど)の後、上記のエラーは一般的なエラーであり、主にHTMLではDOMが形成されていないが、JSを使用してイベントを提供したり、Chromeでオブジェクトを定義していないpropertyを読み取ったり、methodを呼び出したりした場合に発生します.

そのため、HTMLにJSを含む「script」タグをbodyの最下部に下げる解決策があります.
<html>
  <head>
    ...
      <h2>응답</h2>
      <div id="response_area"></div>
    </div>

    <script type='text/javascript' src="./App.js"></script>
  </body>
</html>

でも。


今回は上記のようにコードを修正しましたが、正常に動作しませんでした.
let Id_text = document.querySelector(".Id-text").value //아이디 입력
let PW_text = document.querySelector(".PW-text").value //비밀번호 입력
let response_area = document.querySelector(".response_area") // 응답창
let elJoinMember = document.getElementById('#Put_login')/로그인 버튼 가져오기 

elJoinMember.addEventListener('click',()=>post(Id_text,PW_text))

//서버로 보내주는 함수 
function post(ID,PW){
  let Identy = [ID,PW]
  console.log('test')
}
jsファイルをチェックすると、ボタンが正常に動作しません.

上記のエラーが出力されました.
MDNにも上記の内容が使用されているため、より解決しにくい.
MDN예시)

buttonElement.addEventListener('click', function (event) {
  alert('누름!');
});
だから結論は.
1.Button自体に関数は含まれていません.(ボタンをID名としてドキュメントにロードできません.)
2.htmlにtypeが設定されておらず、正常に動作しません.
という結果になり、解決策を確認しました.
3.htmlはjavascripを正しくロードしていません.(以上の方法で確認しましたが、HTML bodyの下部でJSを呼び出すとDOM形成を確認してJSを実行します.)

「type=text/javascript」と入力します。


まず、2つ目の方法は結果を確認することです.最初にhtmlに「script」で記入してファイルに入れると、デフォルトはjavascriptに設定されます.
HTML 5では、
script要素のtypeデバッガはtext/javascriptとして指定されているので、同じ文でも宣言する必要はありません.
同様にcssも指定されるのでtype=「text/css」を指定する必要はありません.
実際に入力しても解決していません.
最後の方法は、ボタンの呼び出し名を変更します.

解決する


最終的に解決した.非常に簡単な方法で、多くの試みを経て、やっと悟った.
エラーの問題は、getElementByIdqセクションにIDコール「#」が追加されていることです.

getElementByIdとquerySelectorは別名の指定に区別がないのに、なぜ単独で作成して使用するのですか?


getElementById VS querySelector差異


  • Document.QuerySelector()は、指定した選択者または選択者グループに一致するドキュメントの最初のElementを返します.一致する要素がない場合はnullを返します.(MDN)

  • Document.getElementById()メソッドは、指定された文字列に一致するid属性を持つ要素を検索し、その属性を表すElementオブジェクトを返します.IDは、ドキュメント内で一意である必要があるため、特定の要素をすばやく検索するときに便利です.(MDN)
    • <form id="screen">
  <input id="login" type="text" value="ID" /> //1번
  <input class="login" type="text" value="ID"/> //2번
</form>

var username1 = document.getElementById("login");//1번 

var username2 = document.querySelector("#screen #login");//1번

var username2 = document.querySelector("#screen .login");//2번
    以上の3つのユーザー名1,2,3にロードされた別名はコメントと同じです.
    IDとして指定された別名を呼び出す場合はgetElementByIdが有利ですが、classや様々な別名を指定するとquertSelectorが有利になります.

    結論


    今回

    このようなエラーは、elmentが正しく呼び出されていないためnull値が出力され、上記の値が呼び出されただけである可能性があります.△今から見ればnullという字は大きく見えます.
    エラーが発生した場合、全体のコードストリームを見るのではなく、詳細を観察し、正しいコードを作成する必要があります.
    何でも、基本フレームをしっかり押さえましょう!!
    圧縮プログラム(level 2)
    HashSetとTreeSetにおけるequals法の挙動の違い