11521 sujets

JavaScript, DOM et API Web HTML5

Texte qui s'affiche au dessus d'une barre de navigation

Bonjour,

Pour un projet en cours, nous devons réalisé un portfolio et je souhaite faire une barre de navigation, que lorsque l'on clique sur l'un des liens, cela nous dirige de une vers l'ancre sur la page et de deux que le titre de la section s'affiche au dessus de la barre de navigation. Pour cela, j'ai essayer de récupérer l'id de chaque bouton cliquable et de faire un test en fonction du bouton cliqué. A savoir que les bouton sont des li qui sont modifié avec du css. Pour faire simple j'aimerai récupéré les id de chaque <li> qui corresponde au nom de chaque section pour ensuite les affiché au dessus de la barre ou au moins dans la page.

Voici ce que j'ai fait pour le moment :
<div class="navBar">
        <ul class="listSection">
            <li class="rondCliquable" id="Section 1" onmouseover="GetId()"><a class="lienSection" href="#mysect1"><span class="titreSection"></span></a></li>
            <li class="rondCliquable" id="Section 2"><a class="lienSection" href="#mysect2" click="GetId()"><span class="titreSection"></span></a></li>
            <li class="rondCliquable" id="Section 3"><a class="lienSection" href="#mysect3" click="GetId()"><span class="titreSection"></span></a></li>
            <li class="rondCliquable" id="Section 4" click="GetId()"><a class="lienSection" href="#mysect4"><span class="titreSection"></span></a></li>
            <li class="rondCliquable" id="Section 5" click="GetId()"><a class="lienSection" href="#mysect5"><span class="titreSection"></span></a></li>
            <li class="rondCliquable" id="Section 6" click="GetId()"><a class="lienSection" href="#mysect6"><span class="titreSection"></span></a></li>
        </ul>
    </div>
    <section id="mysect1">
        <h1>Section 1</h1>
    </section>
    <section id="mysect2">
        <h1>Section 2</h1>
    </section>
    <section id="mysect3">
        <h1>Section 3</h1>
    </section>
    <section id="mysect4">
        <h1>Section 4</h1>
    </section>
    <section id="mysect5">
        <h1>Section 5</h1>
    </section>
    <section id="mysect6">
        <h1>Section 6</h1>
    </section>


 function GetId() {
            if (document.getElementById('#Section 1').click()) {
                var section = document.getElementById('#Section 1');
                var idGet = section.getAttribute('id');
                document.write(idGet);
            } 
            if (document.getElementById('#Section 2')) {
                var section = document.getElementById('#Section 2');
                var idGet = section.getAttribute('id');
            } 
            if (document.getElementById('#Section 3')) {
                var section = document.getElementById('#Section 3');
                var idGet = section.getAttribute('id');
            } 
            if (document.getElementById('#Section 4')) {
                var section = document.getElementById('#Section 4');
                var idGet = section.getAttribute('id');
            } 
            if (document.getElementById('#Section 5')) {
                var section = document.getElementById('#Section 5');
                var idGet = section.getAttribute('id');
            } 
            else if (document.getElementById('#Section 6')) {
                var section = document.getElementById('#Section 6');
                var idGet = section.getAttribute('id');
            }
        
            var conteneurTitre = document.createElement('div');
            var titreSection = document.createTextNode(idGet);
            conteneurTitre.appendChild(titreSection);
    }


Si quelqu'un pourrait me venir en aide cela serait fort sympathique.
Modifié par Maikun (28 May 2019 - 11:03)
En faite, je me suis inspiré d'un autre programme que j'avais vu et je pensais testé à chaque fois l’élément sélectionné. En gros je if() chaque <li> avec et je teste après quel <li> a été sélectionné pour récupérer l'id du <li> sélectionner.
Alors,
l'element <li> n'a pas de "selection" comme la balise <select> ou encore <datalist>

Faire un if comme cela 
if (document.getElementById('#Section 1').click())

ne veut pas dire "Si section 1 à été cliquer?" non ça ne marche pas comme ça malheureusement Smiley smile
document.getElementById('#Section 1').click(), le .click() est un événement il ne te renvoit pas de booléean.

Faire un if comme cela
if (document.getElementById('#Section 6'))
sert à dire "Si Section 6 existe?" je ne sais pas si c'est ce que tu veux.

La fonction click="GetId()" dans les <li>, pourquoi pas, mais tu peux mieux faire

var item = document.getElementsByClassName("rondCliquable");
item.addEventListener("click", itemChoose);
 
function itemChoose(){
//la tu fais ce que tu veux
}

Et comme ça tu peux virer tout les click="GetId() qui fait que c'est pas très jolie à lire.
Donc si je comprend bien :
 var item = document.getElementsByClassName("rondCliquable");
item.addEventListener("click", itemChoose);


Me permet que lorsque je clique sur un <li> avec la classe rondCliquable, j'execute la fonction itemChoose().

Et dedans je peu par exemple recupérer l'id du rond cliqué et l'afficher dans un div ?
Modifié par Maikun (29 May 2019 - 12:36)
Sujet clos
Aller à