estoy trabajando en una aplicación meteorológica y recibo este error una vez que la página carga "Error de tipo no detectado: no se puede leer la propiedad 'addEventListener' de nulo" en la línea 36
aquí está el fragmento de código para el 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>`.................................................... ..........................
y para 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"; } });el querySelector usa los selectores CSS para encontrar un elemento en su página, el selector que pasó es .form lo que significa encontrar un elemento con una clase llamada formulario y esto no aparece en su HTML en ninguna parte, por lo que el selector correcto es 'formulario' sin un . desde . representa una búsqueda de clase
entonces el codigo completo es
const form = document.querySelector('form');o puede agregar clase a su formulario
<form class="form"> ...para obtener más detalles sobre los selectores de CSS, consulte https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
No tienes una clase .form en tu 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>Quitar el . si desea consultar el DOM para una etiqueta
const form = document.querySelector('.form');