Impossible de lire la propriété 'addEventListener' De null
Je dois utiliser vanilla JavaScript pour un projet. J'ai quelques fonctions, dont l'une est un bouton qui ouvre un menu. Il fonctionne sur les pages où l'id de la cible existe, mais provoque une erreur sur les pages où l'id n'existe pas. Sur les pages où la fonction ne peut pas trouver l'id, je reçois une erreur "Impossible de lire la propriété 'addEventListener' de null " et aucune de mes autres fonctions ne fonctionne.
Voici le code du bouton qui ouvre le menu.
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;
};
Comment puis-je traiter avec cette? J'ai probablement besoin d'envelopper ce code dans une autre fonction ou d'utiliser une instruction if/else afin qu'elle ne recherche que l'id sur des pages spécifiques, mais pas sûr exactement.
10 réponses
Je pense que l'approche la plus simple serait de simplement vérifier que el n'est pas null avant d'ajouter un écouteur d'événement:
var el = document.getElementById('overlayBtn');
if(el){
el.addEventListener('click', swapper, false);
}
Il semble que document.getElementById('overlayBtn'); retourne null car il s'exécute avant le chargement complet du DOM.
Si vous mettez cette ligne de code sous
window.onload=function(){
-- put your code here
}
Ensuite, il fonctionnera sans problème.
Exemple:
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>");
}
J'ai fait face à une situation similaire. C'est probablement parce que le script est exécuté avant le chargement de la page. En plaçant le script au bas de la page, j'ai contourné le problème.
Je recevais la même erreur, mais effectuer une vérification nulle ne semblait pas aider.
La solution que j'ai trouvée était d'envelopper ma fonction dans un écouteur d'événement pour que tout le document vérifie quand le DOM a fini de charger.
document.addEventListener('DOMContentLoaded', function () {
el.addEventListener('click', swapper, false);
});
Je pense que c'est parce que j'utilise un framework (angulaire) qui change dynamiquement mes classes HTML et mes ID.
Merci à @ Rob M. pour son aide. Voici à quoi ressemblait le dernier bloc de code:
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;
};
}
J'ai simplement ajouté "asynchrone" à ma balise de script, qui semble avoir résolu le problème. Je ne sais pas pourquoi, si quelqu'un peut expliquer, mais cela a fonctionné pour moi. Je suppose que la page n'attend pas le chargement du script, donc la page se charge en même temps que le JavaScript.
Comme d'autres l'ont dit, le problème est que le script est exécuté avant le chargement de la page (et en particulier de l'élément cible).
Mais je n'aime pas la solution de réorganiser le contenu.
La solution préférée consiste à placer un gestionnaire d'événements sur l'événement page onload et à y définir l'écouteur. Cela garantira que la page et l'élément cible sont chargés avant l'exécution de l'affectation. par exemple
<script>
function onLoadFunct(){
// set Listener here, also using suggested test for null
}
....
</script>
<body onload="onLoadFunct()" ....>
.....
J'ai une collection de citations avec des noms. J'utilise le bouton de mise à jour pour mettre à jour la dernière citation associée à un nom spécifique, mais en cliquant sur le bouton de mise à jour, il ne se met pas à jour. J'inclus le code ci-dessous pour le serveur.fichier JS et fichier JS externe (principal.js).
Principal.js (JS externe)
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);
})
})
}
Serveur.fichier 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);
})
})
C'est parce que l'élément n'avait pas été chargé au moment où le bundle js était en cours d'exécution.
Je déplacerais le <script src="sample.js" type="text/javascript"></script> tout en bas du fichier index.html. De cette façon, vous pouvez vous assurer que le script est exécuté après que tous les éléments html ont été analysés et rendus .
Ajoute tous les écouteurs d'événements lors du chargement d'une fenêtre.Fonctionne comme un charme, peu importe où vous mettez des balises de script.
window.addEventListener("load", startup);
function startup() {
document.getElementById("el").addEventListener("click", myFunc);
document.getElementById("el2").addEventListener("input", myFunc);
}
myFunc(){
}