Bonjour.
J'ai suivi le tutoriel Une carte intéractive en svg que j'ai reproduit et tout fonctionne nickel.
Là où j'ai un problème, c'est lorsque je créé 2 cartes. Il y en a une qui ne fonctionne pas.
Pour une carte j'ai 1 div qui contient 2 autres div qui correspondent au svg pour le premier et à la liste de liens pour le second.
Mon fichier JS est placé en fin de body.

J'ai donc 2 cartes avec 2 fichiers JS. (une carte des départements (mapDep) et une carte des régions (mapReg)).
Les fichiers JS sont en fin de body.

Suivant lequel des deux fichiers JS je place en premier l'une des cartes fonctionne et pas l'autre.
Quelqu'un pourrait-il m'expliquer pourquoi cela est-il ainsi ?

Merci de vos éclaircissements.

Ce que je fais

Fichier HTML

<div class="mapDep row" id="mapDep">
    <div class="mapDep__image col-sm-6">
        <svg>
        </svg>
    </div>
<div class="mapDep__liste col-sm-6">
    <ul>
      <li><a href="departements(liens).php?dept=Ain" id="liste-01">Ain</a></li>
      <li><a href="departements(liens).php?dept=Aisne" id="liste-02">Aisne</a></li>
      <li><a href="departements(liens).php?dept=Allier" id="liste-03">Allier</a></li>
      <li><a href="departements(liens).php?dept=Alpes-de-Haute-Provence" id="liste-04">Alpes-de-Haute-Provence</a></li>
      <li><a href="departements(liens).php?dept=Hautes-alpes" id="liste-05">Hautes-alpes</a></li>
      <li><a href="departements(liens).php?dept=Alpes-Maritimes" id="liste-06">Alpes-Maritimes</a></li>
      <li><a href="departements(liens).php?dept=Ardèche" id="liste-07">Ardèche</a></li>
      <li><a href="departements(liens).php?dept=Ardennes" id="liste-08">Ardennes</a></li>
      <li><a href="departements(liens).php?dept=Ariège" id="liste-09">Ariège</a></li>
      <li><a href="departements(liens).php?dept=Aube" id="liste-10">Aube</a></li>
      <li><a href="departements(liens).php?dept=Aude" id="liste-11">Aude</a></li>
      <li><a href="departements(liens).php?dept=Aveyron" id="liste-12">Aveyron</a></li>

                        <li><a href="departements(liens).php?dept=Bouches-du-Rhône" id="liste-13">Bouches-du-Rhône</a></li>
                        <li><a href="departements(liens).php?dept=Calvados" id="liste-14">Calvados</a></li>
                        <li><a href="departements(liens).php?dept=Cantal" id="liste-15">Cantal</a></li>
                        <li><a href="departements(liens).php?dept=Charente" id="liste-16">Charente</a></li>
                        <li><a href="departements(liens).php?dept=Charente-Maritime" id="liste-17">Charente-Maritime</a></li>
                        <li><a href="departements(liens).php?dept=Cher" id="liste-18">Cher</a></li>
                        <li><a href="departements(liens).php?dept=Corrèze" id="liste-19">Corrèze</a></li>
                        <li><a href="departements(liens).php?dept=Corse-du-sud" id="liste-2A">Corse-du-sud</a></li>
                        <li><a href="departements(liens).php?dept=Haute-corse" id="liste-2B">Haute-corse</a></li>
                        <li><a href="departements(liens).php?dept=Côte-d'or" id="liste-21">Côte-d'or</a></li>
                        <li><a href="departements(liens).php?dept=Côtes-d'armor" id="liste-22">Côtes-d'armor</a></li>
                        <li><a href="departements(liens).php?dept=Creuse" id="liste-23">Creuse</a></li>
                        <li><a href="departements(liens).php?dept=Dordogne" id="liste-24">Dordogne</a></li>
                        <li><a href="departements(liens).php?dept=Doubs" id="liste-25">Doubs</a></li>

  <li><a href="departements(liens).php?dept=Drôme" id="liste-26">Drôme</a></li>
  <li><a href="departements(liens).php?dept=Eure" id="liste-27">Eure</a></li>
  <li><a href="departements(liens).php?dept=Eure-et-Loir" id="liste-28">Eure-et-Loir</a></li>
  <li><a href="departements(liens).php?dept=Finistère" id="liste-29">Finistère</a></li>
  <li><a href="departements(liens).php?dept=Gard" id="liste-30">Gard</a></li>
  <li><a href="departements(liens).php?dept=Haute-Garonne" id="liste-31">Haute-Garonne</a></li>
  <li><a href="departements(liens).php?dept=Gers" id="liste-32">Gers</a></li>
  <li><a href="departements(liens).php?dept=Gironde" id="liste-33">Gironde</a></li>
  <li><a href="departements(liens).php?dept=Hérault" id="liste-34">Hérault</a></li>
  <li><a href="departements(liens).php?dept=Ile-et-Vilaine" id="liste-35">Ile-et-Vilaine</a></li>

  <li><a href="departements(liens).php?dept=Indre" id="liste-36">Indre</a></li>
  <li><a href="departements(liens).php?dept=Indre-et-Loire" id="liste-37">Indre-et-Loire</a></li>
  <li><a href="departements(liens).php?dept=Isère" id="liste-38">Isère</a></li>
  <li><a href="departements(liens).php?dept=Jura" id="liste-39">Jura</a></li>
  <li><a href="departements(liens).php?dept=Landes" id="liste-40">Landes</a></li>
  <li><a href="departements(liens).php?dept=Loir-et-Cher" id="liste-41">Loir-et-Cher</a></li>
  <li><a href="departements(liens).php?dept=Loire" id="liste-42">Loire</a></li>
  <li><a href="departements(liens).php?dept=Haute-Loire" id="liste-43">Haute-Loire</a></li>
  <li><a href="departements(liens).php?dept=Loire-Atlantique" id="liste-44">Loire-Atlantique</a></li>
  <li><a href="departements(liens).php?dept=Loiret" id="liste-45">Loiret</a></li>
  <li><a href="departements(liens).php?dept=Lot" id="liste-46">Lot</a></li>
  <li><a href="departements(liens).php?dept=Lot-et-Garonne" id="liste-47">Lot-et-Garonne</a></li>

    <li><a href="departements(liens).php?dept=Lozère" id="liste-48">Lozère</a></li>
    <li><a href="departements(liens).php?dept=Maine-et-Loire" id="liste-49">Maine-et-Loire</a></li>
    <li><a href="departements(liens).php?dept=Manche" id="liste-50">Manche</a></li>
    <li><a href="departements(liens).php?dept=Marne" id="liste-51">Marne</a></li>
    <li><a href="departements(liens).php?dept=Haute-Marne" id="liste-52">Haute-Marne</a></li>
    <li><a href="departements(liens).php?dept=Mayenne" id="liste-53">Mayenne</a></li>
    <li><a href="departements(liens).php?dept=Meurthe-et-Moselle" id="liste-54">Meurthe-et-Moselle</a></li>
    <li><a href="departements(liens).php?dept=Meuse" id="liste-55">Meuse</a></li>
    <li><a href="departements(liens).php?dept=Morbihan" id="liste-56">Morbihan</a></li>
    <li><a href="departements(liens).php?dept=Moselle" id="liste-57">Moselle</a></li>
    <li><a href="departements(liens).php?dept=Nièvre" id="liste-58">Nièvre</a></li>
    <li><a href="departements(liens).php?dept=Nord" id="liste-59">Nord</a></li>

<li><a href="departements(liens).php?dept=Oise" id="liste-60">Oise</a></li>
<li><a href="departements(liens).php?dept=Orne" id="liste-61">Orne</a></li>
<li><a href="departements(liens).php?dept=Pas-de-Calais" id="liste-62">Pas-de-Calais</a></li>
<li><a href="departements(liens).php?dept=Puy-de-Dôme" id="liste-63">Puy-de-Dôme</a></li>
<li><a href="departements(liens).php?dept=Pyrénées-Atlantiques" id="liste-64">Pyrénées-Atlantiques</a></li>
<li><a href="departements(liens).php?dept=Hautes-Pyrénées" id="liste-65">Hautes-Pyrénées</a></li>
<li><a href="departements(liens).php?dept=Pyrénées-Orientales" id="liste-66">Pyrénées-Orientales</a></li>
<li><a href="departements(liens).php?dept=Bas-Rhin" id="liste-67">Bas-Rhin</a></li>
<li><a href="departements(liens).php?dept=Haut-Rhin" id="liste-68">Haut-Rhin</a></li>
<li><a href="departements(liens).php?dept=Rhône" id="liste-69">Rhône</a></li>
<li><a href="departements(liens).php?dept=Haute-Saône" id="liste-70">Haute-Saône</a></li>
<li><a href="departements(liens).php?dept=Saône-et-Loire" id="liste-71">Saône-et-Loire</a></li>

<li><a href="departements(liens).php?dept=Sarthe" id="liste-72">Sarthe</a></li>
<li><a href="departements(liens).php?dept=Savoie" id="liste-73">Savoie</a></li>
<li><a href="departements(liens).php?dept=Haute-savoie" id="liste-74">Haute-savoie</a></li>
<li><a href="departements(liens).php?dept=Paris" id="liste-75">Paris</a></li>
<li><a href="departements(liens).php?dept=Seine-Maritime" id="liste-76">Seine-Maritime</a></li>
<li><a href="departements(liens).php?dept=Seine-et-Marne" id="liste-77">Seine-et-Marne</a></li>
<li><a href="departements(liens).php?dept=Yvelines" id="liste-78">Yvelines</a></li>
<li><a href="departements(liens).php?dept=Deux-Sèvres" id="liste-79">Deux-Sèvres</a></li>
<li><a href="departements(liens).php?dept=Somme" id="liste-80">Somme</a></li>
<li><a href="departements(liens).php?dept=Tarn" id="liste-81">Tarn</a></li>
<li><a href="departements(liens).php?dept=Tarn-et-Garonne" id="liste-82">Tarn-et-Garonne</a></li>
<li><a href="departements(liens).php?dept=Var" id="liste-83">Var</a></li>

<li><a href="departements(liens).php?dept=Vaucluse" id="liste-84">Vaucluse</a></li>
<li><a href="departements(liens).php?dept=Vendée" id="liste-85">Vendée</a></li>
<li><a href="departements(liens).php?dept=Vienne" id="liste-86">Vienne</a></li>
<li><a href="departements(liens).php?dept=Haute-Vienne" id="liste-87">Haute-Vienne</a></li>
<li><a href="departements(liens).php?dept=Vosges" id="liste-88">Vosges</a></li>
<li><a href="departements(liens).php?dept=Yonne" id="liste-89">Yonne</a></li>
<li><a href="departements(liens).php?dept=Territoire de Belfort" id="liste-90">Territoire de Belfort</a></li>
<li><a href="departements(liens).php?dept=Essonne" id="liste-91">Essonne</a></li>
<li><a href="departements(liens).php?dept=Hauts-de-Seine" id="liste-92">Hauts-de-Seine</a></li>
<li><a href="departements(liens).php?dept=Seine-Saint-Denis" id="liste-93">Seine-Saint-Denis</a></li>
<li><a href="departements(liens).php?dept=Val-de-Marne" id="liste-94">Val-de-Marne</a></li>
<li><a href="departements(liens).php?dept=Val-d'oise" id="liste-95">Val-d'oise</a></li>
</ul>
</div>
</div>

<div class="mapReg row" id="mapReg">
    <div class="mapReg__image col-sm-6">
        <svg>
        </svg>
    </div>
    <div class="mapReg__liste col-sm-6">
        <ul>
        <li><a href="regions(liens).php?region=Auvergne-Rhône-Alpes" id="liste-C">Auvergne-Rhône-Alpes</a></li>
        <li><a href="http://google.com/?q=D" id="liste-D">Bourgogne-Franche-Comté</a></li>
        <li><a href="http://google.com/?q=E" id="liste-E">Bretagne</a></li>
        <li><a href="http://google.com/?q=F" id="liste-F">Centre-Val de Loire</a></li>
        <li><a href="http://google.com/?q=G" id="liste-G">Corse</a></li>
        <li><a href="http://google.com/?q=A" id="liste-A">Grand Est</a></li>
        <li><a href="http://google.com/?q=J" id="liste-J">Hauts-de-France</a></li>
        <li><a href="http://google.com/?q=H" id="liste-H">Île-de-France</a></li>
        <li><a href="http://google.com/?q=K" id="liste-K">Normandie</a></li>
        <li><a href="http://google.com/?q=B" id="liste-B">Nouvelle Aquitaine</a></li>
        <li><a href="http://google.com/?q=I" id="liste-I">Occitanie</a></li>
        <li><a href="http://google.com/?q=L" id="liste-L">Pays-de-la-Loire</a></li>
        <li><a href="http://google.com/?q=M" id="liste-M">Provence-Alpes-Côte d'Azur</a></li>
        </ul>
     </div>
</div>

Fichier JS carte départements

var mapdep = document.querySelector('#mapDep')

var paths = mapdep.querySelectorAll('.mapDep__image a')

var links = mapdep.querySelectorAll('.mapDep__liste a')

// Polyfill du foreach
if (NodeList.prototype.forEach === undefined) {
    NodeList.prototype.forEach = function (callback) {
        [].forEach.call (this, callback)
    }
}

var activeArea = function (id) {
    mapdep.querySelectorAll('.is-active').forEach (function (item) {
        item.classList.remove('is-active')
    })
    if (id !== undefined) {
        document.querySelector('#liste-' + id).classList.add('is-active')
        document.querySelector('#dep-' + id).classList.add('is-active')
    }

}

paths.forEach (function (path) {
    path.addEventListener ('mouseenter', function () {
        var id = this.id.replace ('dep-', '')
        activeArea(id)
    })
})

links.forEach(function (link) {
    link.addEventListener('mouseenter', function () {
        var id = this.id.replace ('liste-', '')
        activeArea(id)
    })
})

mapdep.addEventListener('mouseover', function () {
    activeArea()
})

Fichier JS carte régions

var mapreg = document.querySelector('#mapReg')

var paths = mapreg.querySelectorAll('.mapReg__image a')

var links = mapreg.querySelectorAll('.mapReg__liste a')

// Polyfill du foreach
if (NodeList.prototype.forEach === undefined) {
    NodeList.prototype.forEach = function (callback) {
        [].forEach.call (this, callback)
    }
}

var activeArea = function (id) {
    mapreg.querySelectorAll('.is-active').forEach (function (item) {
        item.classList.remove('is-active')
    })
    if (id !== undefined) {
        document.querySelector('#liste-' + id).classList.add('is-active')
        document.querySelector('#region-' + id).classList.add('is-active')
    }

}

paths.forEach (function (path) {
    path.addEventListener ('mouseenter', function () {
        var id = this.id.replace ('region-', '')
        activeArea(id)
    })
})

links.forEach(function (link) {
    link.addEventListener('mouseenter', function () {
        var id = this.id.replace ('liste-', '')
        activeArea(id)
    })
})

mapreg.addEventListener('mouseover', function () {
    activeArea()
})

Ce que je veux

J'aimerais que les 2 cartes fonctionnent. Dans ce code, seule la carte départements marche bien.
Si je change l'ordre des scripts, c'est la carte régions seulement qui fonctionne.

Ce que j'obtiens

L'erreur que j'obtiens dans la console, lorsque je passe sur la carte qui ne fonctionne pas, ici la carte région, est :
carteDep.js:24 Uncaught TypeError: Cannot read property 'classList' of null
at activeArea (carteDep.js:24)
at HTMLAnchorElement. (carteReg.js:39)

Merci pour vos éclaircissements :-)

5 réponses


Lartak
Réponse acceptée

Bonjour.
Pour commencer, tu devrais éviter d'avoir plusieurs fois le même code Javascript, je fais principalement la remarque pour le polyfill, tu devrais plutôt créer un fichier javascript généraliste qui est chargé avant tes autres fichiers persos dans lequel tu y mets tout le code qui peut te servir à plusieurs reprises dans ton application.
Ensuite, ton problème doit provenir du fait que tu définis à plusieurs reprises les mêmes noms de variables paths, links, activeArea, ce qui doit les faire entrer en conflit entre elles.

Bonjour et merci de me venir en aide.
J'ai bien saisi la notion de conflit entre les variables. Donc si je suis tes conseils il faut que je créé un fichier JS pour y mettre le polyfill. Que je le place avant les 2 autres (dépt et régions). Et que je change le nom des 3 variables (paths, links et activeArea) dans un des deux fichiers (dépt ou régions). C'est bien cela ?

Ok. J'ai mis le polyfill dans un fichier à part. Je l'ai placé avant les autres (dept et regions). J'ai changé le nom des variables dans un des fichiers.
Et cela fonctionne à merveille !!
Un grand merci Lartak pour ton aide !
Bonne journée à toi :-)

De rien, avec plaisir.
Pour information, en général la plupart des développeurs créent un fichier Javascript que l'on peut définir comme le fichier pilote, dans lequel ils mettent des fonctions ou autres qui sont utilisés dans la casi totalité du site ou qui peuvent être utilisés dans d'autres fichiers javascripts, ils sont souvent nommé app ou main et qui est chargé avant tout autre fichier javascript perso, c'est comme par exemple ton fichier avec le polyfill, tu pourras par exemple y mettre d'autres codes qui concernent d'autres polyfill, ce qui te permettra par exemple de pouvoir les retrouver plus rapidement et plus facilement.

Merci bien pour ces précisions très instructives. Encore merci :-)