TypeError non intercepté: Impossible de définir la propriété 'onclick' de l'erreur null sur vanilla js mais pas sur jquery

J'ai deux pages, page1.html & page2.html, elles sont liées au même fichier javascript. Ceci est le balisage de la page 1TypeError non intercepté: Impossible de définir la propriété 'onclick' de l'erreur null sur vanilla js mais pas sur jquery

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 

    <button class="button">HIT ME</button> 
    <div class="trig"></div> 
</body> 
<script src="jquery.min.js"></script> 
<script src="script.js"></script> 
</html>

et page 2

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <button class="button_2">HIT ME</button> 
</body> 
<script src="jquery.min.js"></script> 
<script src="script.js"></script> 
</html>

et c'est le script

document.querySelector(".button").onclick = function(){ 
    document.querySelector(".trig").style.display = "block"; 
}

Quand je rafraichir la page 2 Je reçois

Uncaught TypeError: Cannot set property 'onclick' of null error

évidemment parce qu'il ne peut pas trouver le classe

Mais quand j'écris la même chose dans jquery il s'exécute gracieusement sans erreurs dans les deux pages. Je veux comprendre pourquoi cela se produit et comment écrire la même chose dans vanilla js sans aucune erreur.

Source

2017-09-29 Jay

il n'y a aucun élément avec la classe '.button' sur votre deuxième page –

comment un » .button_2' est cliqué si elle s'est pas là? –

Avez-vous lu la deuxième partie de la question? – Jay

I want to understand why this happens and how to write the same thing in vanilla js without getting any errors.

Parce que lorsque l'élément avec button classe n'existe pas, alors $('.button') ne retourne pas nulle, alors que document.querySelector(".button") fait.

Vous devez vérifier d'abord avec null Vanila de Apis

var button = document.querySelector(".button"); 
button && (button.onclick = function(){ 
    document.querySelector(".trig").style.display = "block"; 
});

Source

2017-09-29 09:27:55 gurvinder372

J'ai essayé votre solution mais je reçois 'Uncaught ReferenceError: Invalid left-side side in assignment' – Jay

@Jay Désolé, j'ai mis à jour la réponse. Je devais juste envelopper la deuxième partie dans des accolades. – gurvinder372

-1

parce que vous écrivez dans le mauvais sens.

vous devriez l'utiliser comme

$('.button').on("click", function(){ 
    document.querySelector(".trig").style.display = "block"; 
});

Source

2017-09-29 09:29:43

Je ne veux pas combiner jquery et javascript. – Jay

TypeError non intercepté: Impossible de définir la propriété 'onclick' de l'erreur null sur vanilla js mais pas sur jquery

Répondre

Questions connexes