我正在開發一個天氣應用程式，一旦頁面加載第 36 行的“Uncaught TypeError: Cannot read property 'addEventListener' of null”，我就會收到此錯誤
這是 Html 的代碼片段：
<div class="weather - app">
<div class="panel">
<form >
<input type="text"
class="search"
placeholder="Search Location .."/>
<button type="submit"
class="submit">
<i class="fa fa-search"></i>
</button>
</form>
<ul class="cities">
<li class="city">Paris</li>
<li class="city">Las Vegas</li>
<li class="city">Japan</li>
<li class="city">Sfax</li>
</ul>
</div>
</div>
<script src = "main.js" ></script>`
..................................................... …………………………………………………………………………………………………………………………
對于 main.js ：
const app = document.querySelector('.weather-app');
const form = document.querySelector('.form');
const search = document.querySelector('.search');
const btn = document.querySelector('.submit');
const cities = document.querySelectorAll('.city');
//add sumbit event to the form
form.addEventListener('submit', (e) => {
e.preventDefault();
//if input field(search bar) empty throw an alert
if (search.value.length == 0) {
alert('Please type in a City name !');
} else {
//change default city name to the one written in search bar
cityInput = search.value;
search.value = "";
app.style.opacity = "0";
}
});
uj5u.com熱心網友回復：
使用querySelectorCSS 選擇器在您的頁面中查找元素，您傳遞的選擇器.form意味著找到一個名為 form 的類的元素，并且這不會出現在您的 HTML 中的任何地方，因此正確的選擇器是沒有.
因為.代表的“form”類搜索
所以完整的代碼是
const form = document.querySelector('form');
或者您可以在表單中添加類
<form class="form">
...
有關 CSS 選擇器的更多詳細資訊，請參閱此 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
uj5u.com熱心網友回復：
您的 html 中沒有 .form 類
<div class="weather - app">
<div class="panel">
<form >
<input type="text"
class="search"
placeholder="Search Location .."/>
<button type="submit"
class="submit">
<i class="fa fa-search"></i>
</button>
</form>
<ul class="cities">
<li class="city">Paris</li>
<li class="city">Las Vegas</li>
<li class="city">Japan</li>
<li class="city">Sfax</li>
</ul>
</div>
</div>
<script src = "main.js" ></script>
去除那個 。如果你想在 DOM 中查詢標簽
const form = document.querySelector('.form');
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/471324.html
標籤：javascript html 事件 添加事件监听器
上一篇：如何使這個JS重復代碼更短