JavaScript Cannot read property

Résolu

Herve_be Messages postés 1110 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 13 juin 2025 - 19 févr. 2021 à 14:00
Herve_be Messages postés 1110 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 13 juin 2025 - 22 févr. 2021 à 12:39

Bonjour,
Je ne comprends pas cette erreur, voici ce que donne la console


Map3.html?map=PilotePrive/Itineraires/Itineraires.xml:42 Uncaught TypeError: Cannot read property 'resetStyle' of undefined
    at e.resetHighlight (Map3.html?map=PilotePrive/Itineraires/Itineraires.xml:42)
    at e.fire (leaflet.js:5)
    at e._fireDOMEvent (leaflet.js:5)
    at e._handleDOMEvent (leaflet.js:5)
    at HTMLDivElement.r (leaflet.js:5)
resetHighlight @ Map3.html?map=PilotePrive/Itineraires/Itineraires.xml:42
fire @ leaflet.js:5
_fireDOMEvent @ leaflet.js:5
_handleDOMEvent @ leaflet.js:5
r @ leaflet.js:5

Map3.html?map=PilotePrive/Itineraires/Itineraires.xml:46 Uncaught TypeError: Cannot read property 'name' of undefined
    at e.popup (Map3.html?map=PilotePrive/Itineraires/Itineraires.xml:46)
    at e.fire (leaflet.js:5)
    at e._fireDOMEvent (leaflet.js:5)
    at e._handleDOMEvent (leaflet.js:5)
    at HTMLDivElement.r (leaflet.js:5)
popup @ Map3.html?map=PilotePrive/Itineraires/Itineraires.xml:46
fire @ leaflet.js:5
_fireDOMEvent @ leaflet.js:5
_handleDOMEvent @ leaflet.js:5
r @ leaflet.js:5

et voici le code, j'ai indiqué où se trouvent les lignes 42 et 46

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });
    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }
}
function resetHighlight(e) {
    geojson.resetStyle(e.target);   <== ligne 42
}

function popup(feature, layer) {
    if (feature.properties.name) {  <== ligne 46
      layer.bindPopup(feature.properties.name);
    }
  }
function Hoover(feature, layer) {
    layer.on({
        click: popup,
        mouseover: highlightFeature,
        mouseout: resetHighlight
    });
}
...
var customLayer = L.geoJson(null, {
  style: function(feature) {
    if (!feature.properties.id) {
      feature.properties.id = n++;
    }
    var iColor = feature.properties.id % colors.length;
    return { color: colors[iColor] };
  }, 
  onEachFeature: Hoover 
});

La fonction highlightFeature fonctionne correctement.
resetHighlight et popup donnent la même erreur Cannot read property

Merci d'avance pour votre aide

A voir également:

Cannot read properties of undefined traduction
Cannot read property of null traduction - Meilleures réponses
Testermaker.js:1 uncaught (in promise) typeerror: cannot read properties of undefined (reading 'configurator') - Meilleures réponses
Traduction créole guadeloupe français reverso - Forum traduction
Input signal out of range ✓ - Forum Matériel & Système
Google traduction photo - Guide
Waldik traduction ✓ - Forum Loisirs / Divertissements
Kif'n'dir traduction ✓ - Forum Windows

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38484 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 juillet 2025 4 751
19 févr. 2021 à 15:34

Bonjour,

Tu utilises la lib leaflet.js
IL faut donc lire la documentation de celle ci pour apprendre à utiliser correctement les fonctions qui s'y trouvent
https://leafletjs.com/reference-1.7.1.html#geojson-resetstyle

Le problème ne provenant pas de ce code js .. mais plutôt de la façon dont tu l'as utilisé dans ta page..

En l'occurrence, pour pouvoir utiliser le resetStyle .. il faut déjà avoir déclaré un style..

 layer.on('mouseover', function (){
            this.setStyle({
                color: 'green'
            });

Herve_be Messages postés 1110 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 13 juin 2025 9
Modifié le 19 févr. 2021 à 16:05

Merci,
J'ai utilisé l'exemple que j'ai trouvé dans la documentation leafletjs ici https://leafletjs.com/examples/choropleth/ Adding Interaction.
click: popup fonctionne
mouseover: highlightFeature aussi
mais pas les 2 ensemble, je pense donc que j'ai commis une erreur de syntaxe mais je ne trouve pas laquelle

jordane45 Messages postés 38484 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 juillet 2025 4 751 > Herve_be Messages postés 1110 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 13 juin 2025
19 févr. 2021 à 16:14

Tu as utilisé l'exemple.. ok ... mais donc... ton code.. c'est quoi exactement ? ( vu que tu as visiblement fait des changements par rapport à l'exemple )

Réponse 2 / 5

Herve_be Messages postés 1110 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 13 juin 2025 9
19 févr. 2021 à 16:29

Je débute avec JS, j'ai voulu combiner 3 interactions : survol de souris, fin du survol et click, c'est là que ça coince, avec un seul évènement ça fonctionne.
J'appelle donc l'interaction comme ceci

onEachFeature: Hoover

Hoover est une fonction qui combine les 3

function Hoover(feature, layer) {
    layer.on({
        click: popup,
        mouseover: highlightFeature,
        mouseout: resetHighlight
    });
}

c'est probablement là qu'est mon erreur puisque, si dans cette fonction je mets seulement popup ou highlightFeature ça fonctionne, si je mets les 2 alors popup ne fonctionne plus et donne l'erreur Cannot read property, idem avec resetHighlight.

jordane45 Messages postés 38484 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 juillet 2025 4 751
19 févr. 2021 à 16:32

Ben.. dans cette parti du code... tu n'as donc pas définit de style...
Donc le resetStyle ne peut pas marcher

layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

Réponse 4 / 5

Herve_be Messages postés 1110 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 13 juin 2025 9
20 févr. 2021 à 14:19

Bon, j'ai trouvé,
évidemment si je déclare var customLayer = L.geoJson(...
puis que j'utilise geoJson.resetStyle(e.target); comme sur l'exemple ça ne fonctionne pas
je dois utiliser customLayer.resetStyle(e.target);

Par contre je ne parviens pas à mettre 2 fonctions ensemble : ceci fonctionne très bien
highlightFeature met une trace en évidence, resetHighlight rétablit le style par défaut

function Interaction(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight
    });
}
...
var customLayer = L.geoJson(null, {
...,
onEachFeature: Interaction

Ceci fonctionne aussi très bien pour afficher un popup quand on clique sur une trace

var customLayer = L.geoJson(null, {
 ...
  }, 
  onEachFeature: function(feature, layer) {
    if (feature.properties.name) {
      layer.bindPopup(feature.properties.name);
    }
  } 
});

mais je ne parviens pas à mettre les 2 ensemble

function popup(e) {
    layer = e.layer,
    feature = layer.feature;                <==
    if (feature.properties.name) {
      layer.bindPopup(feature.properties.name);
    }
  }
...
function Interaction(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: popup
    });
}

Highlight et Reset fonctionnent bien mais quand je clique j'obtiens

Uncaught TypeError: Cannot read property 'feature' of undefined
sur la ligne en face de laquelle j'ai mis une flèche
et si je commente froidement cette ligne j'obtiens
Uncaught ReferenceError: feature is not defined sur la ligne suivante

Je pense qu'il s'agit simplement d'un passage de paramètres mais mes connaissances en JS ne sont pas suffisante pour que je comprenne mon erreur : un petit coup de main ?
Merci

Discussions similaires

Cannot read properties of undefined (reading 'user')

Bonjours quand je lance mon bot discord tous marche, mais en exécutant la commande j'ai cette erreur Cannot read properties of undefined (reading 'user') ça fait 1 semaine que je cherche sur internet regarde sur youtube et cetera voilà le code ps: je suis avec discord.js V13
const Discord = require("discord.js"); const {MessageEmbed} = require("discord.js"); const config = require("../../botconfig/config.json") var ee = require("../../botconfig/embed.json") const moment = require("moment") const settings = require("../../botconfig/settings.json"); module.exports = { name: "serverinfo", statut: "???? Non-fonctionnelle bug à fix ????", category: "Bug", aliases: ["sinfo"], coo...

Uncaught TypeError: Cannot read property 'top' of undefined

Bonjour,
J'utilise le code suivant qui me permet d'ajouter une class à un élément du menu lorsque celui-ci est au niveau de l'écran de l'internaute :
$(document).ready(function () { $(document).on("scroll", onScroll); }); function onScroll(event){ var scrollPos = $(document).scrollTop(); $('#nav-main a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top scrollPos +55) { $('#mnav-main ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); }

Il...

Uncaught TypeError: Cannot read property 'style' of null

Bonjour,

Je suis en train de transformer une application web en un plugin Wordpress afin de gérer ma base de données.

Pour cela j'ai créé une interface graphique qui doit s'intégrer dans ma page HTML malheureusement cette interface ne s'affiche pas mais j'ai bien accès à ma page.

Pour diagnostiquer l'erreur j'ai utilisé l'outil de développement de mon navigateur et ce dernier m'affiche l'erreur: Uncaught TypeError: Cannot read property 'style' of null
at displayLaunchBar (gestion.php:346)
at loadDesktopConfig (gestion.php:325)
at onload (gestion.php:71)

Tout cela correspond à mon code Javascript malheureusemen...

Cannot read property 'addEventListener' of null

Bonjour,

J'ai une erreur qui est la suivante à la ligne 19: Uncaught TypeError (anonymous function): Cannot read property 'addEventListener' of null.
Je suppose que c'est ma fonction "sousMenu. Ce qui fait que mon icône ne se modifie pas quand je clique mais, mon menu, s'ouvre et se ferme bien. Je vous remercie de votre aide.
function sousMenu() { var sous_menu = document.getElementById('sub-nav-mobile'); var btn_sous_menu = document.getElementById("btn-sous-menu"); if (sous_menu.style.display == 'none' || sous_menu.style.display == '') { ...

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in

Bonjour à tous,

Un code ajax me permet de récupérer selon la zone et le poids, un montant précis.
J'utilise 2 tables, celle de dhl et celle de la poste.

Mon code ajax et la requête pour dhl fonctionne très bien etle résultat est récupéré via ce bout de code :
if($VAL_Table == "tb_shop_prices_dhl") { $sql = "SELECT $VAL_Zone FROM $VAL_Table WHERE $VAL_Poids BETWEEN Poids_min AND Poids_max"; try{ $Stat = $pdo->prepare($sql); $Stat->execute(); $result["success"] = $Stat->fetchAll(PDO::FETCH_ASSOC); } catch(PDOException $e) {$result["Error"] = "".$e->getMessage()."";} }

Quant à la condition de la poste, c'est plusieurs requ...

Cannot set properties of null (setting 'classList')

Bonjour,

Depuis quelque jour j'ai un probleme javascript qui est apparue alors que quelque jour avant il n'y avait pas cette erreur.
Je ne comprend pas d'ou elle vient. J'ai essaye avec plusieur navigateur Chrome, Firefox, Edge.

voici l'erreur :

Uncaught TypeError: Cannot set properties of null (setting 'classList')
at quit_div (script.js:65:26)
at search_div (script.js:56:5)
at HTMLAnchorElement.onclick (VM915 :24:69)

voici le code javascript :
let div_search = document.querySelector('.search-user'); let div_msg = document.querySelector('.message-user'); function search_div()...

Votre réponse

Discussions similaires