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 :-)