bugfix> javascript > 投稿

プログラムを実行するとこのエラーが発生します。名前を入力し、ログインボタンをクリックすると、ページがindex.htmlファイルである新しいページにリダイレクトされ、Uncaught TypeErrorのエラーが表示されます。最初のJSファイルでnullのプロパティ 'addEventListener'を読み取ることができません。

これが私の最初のJSファイルです。

var name = '';
const login = document.querySelector('.logButton');

login.addEventListener('click', () =>{
name = document.querySelector('.name').value;
});

このJSファイルのHTMLファイルの本文は次のとおりです

<div class = loginPage>
<input type = 'text' placeholder= 'Username' class = names></input> <a href = '../index.html'><button class = logButton> Login</button></a>
</div>

index.htmlの2番目のJSファイル

const now = new Date();
const hour = now.getHours();
const morning = " ";
const night = " ";
const div = document.querySelector('.page_1_body');
function print(docu){
  div.innerHTML = "<h1> <a href = 'Page_2/page2.html'>" + docu +"</a>";
}
function dayrnight(name){
if ( hour <= 24 && hour < 18 ){
  const morning = "<h1> Good Day " + name + " !</h1>";
  print(morning);
} else {
  const night = "<h1>Good evening " + name + " !</h1>";
  print(night);
}
}
dayrnight(name);

こちらがindex.htmlファイルです

<body>
    <div class = page_1_body>
    </div>
<script src="index.js"></script>
<script src = "Login_page/Login.js"></script>
</body>

問題を解決するのに役立つようにコードを投稿しました。ありがとうございました!

回答 3 件
  • あなたはあなたの class で間違いをしている   class = loginPage の属性 、 class = names  および class = logButton 。クラス名を二重引用符で囲まないで、2番目は class=names   class=name である必要があります 。

    以下のコードを確認してください。

    これを変える:

    <div class = loginPage>
    <input type = 'text' placeholder= 'Username' class = names></input> <a href = '../index.html'><button class = logButton> Login</button></a>
    </div>
    
    

    これに:

    <div class ="loginPage">
    <input type = 'text' placeholder= 'Username' class ="name"></input> <a href = '../index.html'><button class="logButton"> Login</button></a>
    </div>
    
    

    CSSクラスの属性については、https://www.w3schools.com/tags/att_global_class.aspをご覧ください。

  • logButton のラッピングを見逃した   class  引用符に。次のように修正します。

    <button class = "logButton">
    
    

    また、 button を確認する必要があります のHTMLはロードしようとしたときに既に生成されているため、ラップします

    document.onreadystatechange = function() {
        //Your code here
    }
    
    

    JSコードの周り。

  • htmlファイルに、次のように要素に追加するクラス名をラップする二重引用符を追加する必要があります。

    <div class = loginPage>
        <input type="text" placeholder="Username" class="names"></input> <a href="../index.html"><button class="logButton"> Login</button></a>
    </div>
    
    

あなたの答え