Как исправить Uncaught TypeError: Невозможно прочитать свойство ‘addEventListener’ из null (не связано с положением файла сценария … Я думаю)

Как исправить Uncaught TypeError: Невозможно прочитать свойство ‘addEventListener’ с нулевым значением (не связано с положением файла сценария … Я думаю)

На этот вопрос уже есть ответ здесь:

Я полностью новичок в JavaScript, и я не могу понять, почему я получаю эту ошибку: Uncaught TypeError: Невозможно прочитать свойство ‘addEventListener’ из null.

Я последовал совету, опубликованному в ответ на похожий вопрос, и положил файл, содержащий мой JavaScript, внизу моего тела, но это не помогло. Я также попытался сделать кнопку onclick = checkValidity (), но это тоже не сработало.

  document.getElementById("loginButton").addEventListener("click", checkValidity); function checkValidity() { var usrName = document.getElementById("inputUsername").value; var usrPswd = document.getElementById("inputPswrd").value; if(usrName == "admin" {amp}amp;{amp}amp; usrPswd == "123"){ window.open("HtmlPage2.html"); } else { alert("Your username and password are incorrect."); } } and the HTML: {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial- scale=1.0"{amp}gt; {amp}lt;meta http-equiv="X-UA-Compatible" content="ie=edge"{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="stylesheet.css"{amp}gt; {amp}lt;title{amp}gt;Document{amp}lt;/title{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class=wrap{amp}gt; {amp}lt;input type="text" id="inputUsername"{amp}gt; {amp}lt;p{amp}gt;Username{amp}lt;/p{amp}gt; {amp}lt;input type="password" id="inputPswrd"{amp}gt; {amp}lt;p{amp}gt;Password{amp}lt;/p{amp}gt; {amp}lt;button id="loginButton"{amp}gt;Log in{amp}lt;/button{amp}gt; {amp}lt;p id="login"{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script type="text/javascript" src="Script.js" async{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

То, что я хочу, чтобы код сделал, это проверить, совпадают ли входные данные в inputUsername и inputPswrd с указанными в функции if … else, и, если это так, откройте новое окно; в противном случае предупредить об ошибке.

РЕДАКТИРОВАТЬ: если я переместить весь код выше в верхней части моего файла JS, он будет работать, как задумано, и откроет новое окно, но тогда код для этой новой страницы не будет работать (но код новой страницы запускается на верхняя часть моего файла JS). Сообщение об ошибке, которое появляется при открытии нового окна, является строкой 1: Uncaught TypeError: Невозможно прочитать свойство ‘value’ из null в Script.js: 1.

Дополнительный код: JS для HTML-страницы 2:

  document.getElementById("greeting").innerHTML="Welcome"; document.getElementById("productButtonOne").addEventListener("click", addToCart); document.getElementById("productButtonTwo").addEventListener("click", addToCart); document.getElementById("productButtonThree").addEventListener("click", addToCart); var clicks = 0; function addToCart() { clicks = clicks   1; document.getElementById("cartProductsTotal").innerHTML = "You have "   clicks   " items in your shopping cart."; } 

Начало HTML для страницы 2:

  {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1.0"{amp}gt; {amp}lt;meta http-equiv="X-UA-Compatible" content="ie=edge"{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="stylesheet.css"{amp}gt; {amp}lt;title{amp}gt;Document{amp}lt;/title{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class=wrap{amp}gt; {amp}lt;h1 id="greeting"{amp}gt;{amp}lt;/h1{amp}gt; {amp}lt;div id="productOne" class="cartItem"{amp}gt; {amp}lt;button id="productButtonOne" class="cartItems"{amp}gt;Add to cart{amp}lt;/button{amp}gt; {amp}lt;img src="monaLisa.jpg" id="monaLisaImage"{amp}gt; {amp}lt;h2 class="productDescriptions"{amp}gt;Mona Lisa{amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt;This painting is great.{amp}lt;/p{amp}gt; {amp}lt;span class=price{amp}gt;This item costs $10.{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector