ClassList.add ne fonctionne pas avec paths SVG

Gwenael Le Gal
Javascript

Bonjour à tous,

Je débute en HTML, CSS et JS et j'essaye de coder une petite carte interactive des stations de ski autour de Grenoble.

Pour ça j'ai créé mes zones ou je souhaite cliquer, mettre en surbrillance etc.. sur une image SVG que j'ai ajouté à mon code HTML, mais j'ai un problème dans le script JS.

Je souhaite juste faire en sorte que lorsqu'on passe la souris sur une zone, celle-ci se mette en surbrillance ainsi que le texte correspondant dans la liste à côté et vice-versa. Cependant, tout fonctionne bien lorsqu'on passe sur le texte (la zone se met bien en surbrillance sur la carte et le texte aussi) mais l'inverse ne fonctionne pas (lorsque je passe sur une zone de l'image elle ne se met pas en surbrillance et le texte non plus).

J'ai remarqué dans la console que lorsque ma souris passe sur le texte, mes div SVG et mes liens sont bien affectés de la classe "is-active" (voir code) mais lorsque je passe sur les zones de la carte les div ne voient pas affecter la classe. Je suppose donc que le problème vient plus de ma fonction qui affecte les classes avec le ForEach sur les paths SVG plutôt que du ClassList.add puisque celui-ci fonctionne très bien pour le texte. J'ai essayé pas mal de choses dans mon code pour voir mais je ne trouve pas de solutions et je ne vois pas pourquoi la fonction ne marche pas... Le problème vient-il des paths directement ?

Je signale aussi que j'obtenais un message d'erreur concernant le classList.add (qqch du genre "classList.add cannot add a value to null") qui a disparu maintenant (je ne sais pas pour quelle raison pour le coup).

Je vous post ici ma partie de code JS ainsi que la portion HTML des paths et des links (vous pourrez remarquer qu'ils sont identiques à ceux du tutoriel GrafikArt pour créer une map intéractive en SVG, je m'en suis inspiré ..)

Partie HTML :

<body>

     <div class="map" id="map">

        <div class="map__image">

          <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   id="svg4528"
   width="1328"
   height="681"
   viewBox="0 0 1328 681"
   sodipodi:docname="Map_eng.svg"
   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">

    <a id="station-A" xlink:title="Lans-en-Vercors" xlink:href="http://www.lansenvercors.com/">
      <path d="m 118.87113,265.90443 31.50346,0.64796 12.17179,22.67864 -7.15987,27.21437 -21.47964,7.12757 -29.35549,-4.53573 -2.86395,-22.67864 z"/>
    </a>

    <a id="station-B" xlink:title="Villard-de-Lans" xlink:href="http://www.espace-villard-correncon.fr/accueil.htm">
      <path d="m 95.212277,510.45875 -24.991305,7.17041 -9.996522,22.06284 9.996522,22.61439 19.437682,2.20629 22.769866,-2.20629 3.33217,-29.23325 4.44289,-13.78926 -20.548403,-9.3767 z"/>
    </a>

    <a id="station-C" xlink:title="Chamrousse" xlink:href="https://www.chamrousse.com/">
      <path d="m 631.03124,225.58293 -6.17065,39.07457 10.79862,21.45271 28.53917,13.02485 24.68255,-18.38803 -6.94198,-29.88056 -16.1979,-13.02485 z"/>
    </a>

    <a id="station-D" xlink:title="Les Sept Laux" xlink:href="http://www.les7laux.com/fr/index.aspx">
      <path d="M 754.48607,112.21725 794.81022,90.994015 825.58391,110.09493 806.483,162.09186 764.03653,148.29675 750.24142,127.07352 Z"/>
    </a>

    <a id="station-E" xlink:title="Alpe d'Huez" xlink:href="https://www.alpedhuez.com/en/winter">
      <path d="m 838.31786,376.44655 19.10091,-24.40672 25.46788,-4.24465 21.22324,30.77369 -10.61162,22.2844 -30.77369,16.97859 -20.16208,-28.65137 z"/>
    </a>

    <a id="station-F" xlink:title="Deux Alpes" xlink:href="http://www.les2alpes.com/en">
      <path d="m 968.84076,600.3517 38.20184,-6.36697 18.0397,27.59021 -23.3455,22.2844 h -36.07952 z"/>
    </a>

    <a id="station-G" xlink:title="La Grave - La Meije" xlink:href="https://www.lagrave-lameije.com/en">
      <path d="m 1103.6083,543.04896 33.9572,-9.55046 30.7737,-3.18348 16.9786,21.22324 -8.4893,31.83485 -27.5902,24.40672 -41.3853,-3.18348 -9.5505,-33.95718 z"/>
    </a>

    <a  id="station-H" xlink:title="Alpe du Grand Serre" xlink:href="http://www.alpedugrandserre.info/en/">
      <path d="m 534.82557,591.86241 2.12232,-28.65137 32.89602,-14.85627 16.97859,6.36697 15.91743,24.40672 -23.34556,8.4893 z"/>
    </a>

</svg>
        </div>

     <div class="map__list">
          <ul>
            <li> <a href="http://www.lansenvercors.com/" id="list-A"> Lans-en-Vercors </a> </li>
            <li> <a href="http://www.espace-villard-correncon.fr/accueil.htm" id="list-B"> Villard-de-Lans </a> </li>
            <li> <a href="https://www.chamrousse.com/" id="list-C"> Chamrousse </a> </li>
            <li> <a href="http://www.les7laux.com/fr/index.aspx" id="list-D"> Les Sept Laux </a> </li>
            <li> <a href="https://www.alpedhuez.com/en/winter" id="list-E"> Alpe d'Huez </a> </li>
            <li> <a href="http://www.les2alpes.com/en" id="list-F"> Deux Alpes </a> </li>
            <li> <a href="https://www.lagrave-lameije.com/en" id="list-G"> La Grave - La Meije </a> </li>
            <li> <a href="http://www.alpedugrandserre.info/en/" id="list-H"> Alpe du Grand Serre </a> </li>
          </ul>
     </div>

     </div>

     <script src="style.js">

     </script>
</body>

Partie JS :

var map = document.querySelector('#map')

var paths = map.querySelectorAll('map__image a')

var links = map.querySelectorAll('.map__list a')

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

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

}

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

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

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

Je vous remercie d'avance pour l'aide que vous pourrez m'apporter, je précise que je ne connais que très peu ces langages et leur fonctionnement mais je connais l'algorithmique en général et quelques langages.

Bonne soirée,

Gwenael

Aucune réponse