javascript - change - No se puede leer la propiedad ''addEventListener'' de null
addeventlistener typescript (11)
Tengo que usar JavaScript de vainilla para un proyecto. Tengo algunas funciones, una de las cuales es un botón que abre un menú. Funciona en páginas donde existe la identificación de destino, pero causa un error en las páginas donde la identificación no existe. En aquellas páginas donde la función no puede encontrar la identificación, recibo un error "No se puede leer la propiedad ''addEventListener'' de nulo" y ninguna de mis otras funciones funciona.
A continuación se muestra el código para el botón que abre el menú.
function swapper() {
toggleClass(document.getElementById(''overlay''), ''open'');
}
var el = document.getElementById(''overlayBtn'');
el.addEventListener(''click'', swapper, false);
var text = document.getElementById(''overlayBtn'');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};
¿Cómo trato con esto? Probablemente necesito envolver todo este código en otra función o usar una instrucción if / else para que solo busque la identificación en páginas específicas, pero no estoy seguro exactamente.
Agregue todos los oyentes de eventos cuando se carga una ventana. Funciona como un encanto sin importar dónde coloque las etiquetas de script.
window.addEventListener("load", startup);
function startup() {
document.getElementById("el").addEventListener("click", myFunc);
document.getElementById("el2").addEventListener("input", myFunc);
}
myFunc(){}
Como otros han dicho, el problema es que el script se ejecuta antes de que se cargue la página (y en particular el elemento de destino).
Pero no me gusta la solución de reordenar el contenido.
La solución preferida es poner un controlador de eventos en el evento de carga de la página y configurar el oyente allí. Eso asegurará que la página y el elemento de destino se carguen antes de que se ejecute la asignación. p.ej
<script>
function onLoadFunct(){
// set Listener here, also using suggested test for null
}
....
</script>
<body onload="onLoadFunct()" ....>
.....
Creo que el enfoque más fácil sería verificar que
el
no sea nulo antes de agregar un detector de eventos:
var el = document.getElementById(''overlayBtn'');
if(el){
el.addEventListener(''click'', swapper, false);
}
Es solo porque tu JS se carga antes de la parte HTML y, por lo tanto, no puede encontrar ese elemento. Simplemente ponga su código JS completo dentro de una función que se llamará cuando se cargue la ventana.
También puede poner su código Javascript debajo del html.
Esto se debe a que el elemento no se había cargado en el momento en que se estaba ejecutando el paquete js.
Me gustaría mover el
<script src="sample.js" type="text/javascript"></script>
al final del archivo
index.html
.
De esta manera, puede asegurarse de que el script se ejecute después de que todos los elementos html se hayan analizado y procesado.
Gracias a @Rob M. por su ayuda. Así es como se veía el bloque final de código:
function swapper() {
toggleClass(document.getElementById(''overlay''), ''open'');
}
var el = document.getElementById(''overlayBtn'');
if (el){
el.addEventListener(''click'', swapper, false);
var text = document.getElementById(''overlayBtn'');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};
}
Me enfrenté a una situación similar. Esto probablemente se deba a que el script se ejecuta antes de que se cargue la página. Al colocar el script en la parte inferior de la página, evité el problema.
Parece que
document.getElementById(''overlayBtn'');
devuelve
null
porque se ejecuta antes de que el DOM se cargue por completo.
Si pones esta línea de código debajo
window.onload=function(){
-- put your code here
}
entonces se ejecutará sin problemas.
Ejemplo:
window.onload=function(){
var mb = document.getElementById("b");
mb.addEventListener("click", handler);
mb.addEventListener("click", handler2);
}
function handler() {
$("p").html("<br>" + $("p").text() + "<br>You clicked me-1!<br>");
}
function handler2() {
$("p").html("<br>" + $("p").text() + "<br>You clicked me-2!<br>");
}
Recibía el mismo error, pero realizar una comprobación nula no parecía ayudar.
La solución que encontré fue ajustar mi función dentro de un detector de eventos para que todo el documento verificara cuando el DOM terminara de cargarse.
document.addEventListener(''DOMContentLoaded'', function () {
el.addEventListener(''click'', swapper, false);
});
Creo que esto se debe a que estoy usando un marco (Angular) que está cambiando mis clases de HTML e ID dinámicamente.
Simplemente agregué ''async'' a mi etiqueta de script, que parece haber solucionado el problema. No estoy seguro de por qué, si alguien puede explicarlo, pero funcionó para mí. Supongo que la página no está esperando que se cargue el script, por lo que se carga al mismo tiempo que el JavaScript.
Async / Await nos permite escribir código asincrónico de manera sincrónica. es solo azúcar sintáctico que utiliza generadores y declaraciones de rendimiento para "pausar" la ejecución, ¡lo que nos permite asignarlo a una variable!
Aquí hay un enlace de referencia: https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da
Tengo una colección de citas junto con nombres. Estoy usando el botón Actualizar para actualizar la última cita asociada con un nombre específico, pero al hacer clic en el botón Actualizar no se actualiza. Incluyo el código a continuación para el archivo server.js y el archivo js externo (main.js).
main.js (js externo)
var update = document.getElementById(''update'');
if (update){
update.addEventListener(''click'', function () {
fetch(''quotes'', {
method: ''put'',
headers: {''Content-Type'': ''application/json''},
body: JSON.stringify({
''name'': ''Muskan'',
''quote'': ''I find your lack of faith disturbing.''
})
})var update = document.getElementById(''update'');
if (update){
update.addEventListener(''click'', function () {
fetch(''quotes'', {
method: ''put'',
headers: {''Content-Type'': ''application/json''},
body: JSON.stringify({
''name'': ''Muskan'',
''quote'': ''I find your lack of faith disturbing.''
})
})
.then(res =>{
if(res.ok) return res.json()
})
.then(data =>{
console.log(data);
window.location.reload(true);
})
})
}
archivo server.js
app.put(''/quotes'', (req, res) => {
db.collection(''quotations'').findOneAndUpdate({name: ''Vikas''},{
$set:{
name: req.body.name,
quote: req.body.quote
}
},{
sort: {_id: -1},
upsert: true
},(err, result) =>{
if (err) return res.send(err);
res.send(result);
})
})