11521 sujets

JavaScript, DOM et API Web HTML5

Comment ajouter une class à un élément HTML séléctionné par data

Bonjour,
J'essaie de créer un système d'onglet dynamique. En cliquant sur un "onglet", un "contenant" se dévoile tandis que les autres sont cachés (par un 'display: none' annulé par la class 'tab-visible'). Les onglets et contenants sont des div et ont tous un attribut data-tab-xxxxx="x". Mon code doit récupérer le data-tab-etiquette="y" (correspond à un onglet cliquable) qui est cliqué et ajouter la class 'tab-visible' à la balise portant un data-tab-content="y" (correspond au contenant à afficher).

L'écouteur d'évènement récupère le data-tab-etiquette="3" (par exemple) et le transmet à ma fonction 'afficherTabContent' qui doit faire le lien avec data-tab-content="3" (pour continuer l'exemple) et lui ajouter la class 'tab-visible'.

Seulement voilà : j'ai une erreur de typage :

TypeError: etiquetteSelect.classList is undefined main.js:31:5
afficherTabContent
http://127.0.0.1:5500/script/main.js:31:5
<anonymous>
http://127.0.0.1:5500/script/main.js:41:9

Auriez-vous une solution ?
Merci d'avance pour vos réponses Smiley smile 


//  -- Repérages
var dataTabEtiquette = document.querySelectorAll('[data-tab-etiquette]');
var dataTabContent = document.querySelectorAll('[data-tab-content]');

// -- Fonctions

function afficherTabContent(etiquetteClick) {
    var numEtiquette = etiquetteClick.dataset.tabEtiquette;
    var etiquetteSelect = document.querySelectorAll("[data-tab-content=\""+numEtiquette+"\"]");
    console.log(etiquetteSelect);
    etiquetteSelect.classList.add('tab-visible');
}

// -- Traitement

for (var p = 0; p < dataTabEtiquette.length; p++) {
    var etiquette = dataTabEtiquette[p];

    etiquette.addEventListener('click', function () {
        var etiquetteClick = this;
        afficherTabContent(etiquetteClick);
    });
}
Tu fais:

element.classList.add('taClasse');


[EDIT]
element et taClass sont des exemples
Modifié par Soldat8889 (22 Oct 2018 - 12:37)
Soldat8889 a écrit :
Tu fais:

element.classList.add('taClasse');


[EDIT]
element et taClass sont des exemples


C'est ce que je fais dans ma fonction :
etiquetteSelect.classList.add('tab-visible');


Le problème est dans la variable 'etiquetteSelect' je crois : elle n'est pas bien typée pour l'utilisation que je fais avec cette ligne de code ci-dessus.
Soldat8889 a écrit :
Tu fais:

element.classList.add('taClasse');


[EDIT]
element et taClass sont des exemples


C'est ce que je fais dans ma fonction :
etiquetteSelect.classList.add('tab-visible');


Le problème est dans la variable 'etiquetteSelect' je crois : elle n'est pas bien typée pour l'utilisation que je fais avec cette ligne de code ci-dessus.
Avec le code ci-dessous, "etiquetteSelect" est null ou a le type NodeList ( ressemble à un tableau ) :
function afficherTabContent(etiquetteClick) {
    var numEtiquette = etiquetteClick.dataset.tabEtiquette;
    var etiquetteSelect = document.querySelectorAll("[data-tab-content=\""+numEtiquette+"\"]");
    console.log(etiquetteSelect);
    etiquetteSelect.classList.add('tab-visible');
}
Il faut utiliser querySelector qui va renvoyer le premier node qui va "matcher". C'est permis d'utiliser les simples strophes aussi ! Evite de créer des variables s'il n'y en a pas besoin.
function afficherTabContent(id) {
    var div = document.querySelector('div[data-tab-content="'+  id + '"]');
    console.log('div : ', div);
    div.classList.add('tab-visible');
}

// Add listener for tabs
var dataTabEtiquettes = document.querySelectorAll('div[data-tab-etiquette]');
for (var p = 0, pMax =  dataTabEtiquettes.length; p<pMax; p++) {
    dataTabEtiquettes[p].addEventListener('click', function (event) {
        numEtiquette = this.dataset.tabEtiquette;
        afficherTabContent(numEtiquette);
        event.preventDefault();
    });
}
C'est plus élégant à faire en pure CSS avec :target ou input[ radio ]
Modifié par bazooka07 (22 Oct 2018 - 14:28)
Sujet clos
Aller à