<div class="rows" name="1">Element 1.1</div>
<div class="rows" name="1">Element 1.2</div>
<div class="rows" name="1">Element 1.3</div>

<div class="rows" name="2">Element 2.1</div>
<div class="rows" name="2">Element 2.2</div>
<div class="rows" name="2">Element 2.3</div>

<input type="button" onclick=afficher_divs(1);>
<input type="button" onclick=afficher_divs(2);>

Mon css :

.rows{
width:100%;
height:20px;
display:none;
}
.is_visible{
display:block;
}

Sans succès...

Pouvez-vous m'aider ?

Merci

Bonsoir, en HTML5 l’attribut name n'est autorisé que pour les éléments de formulaire. Tu ne peux l'utiliser sur l'élément <div>

Tu peux vérifier tes erreurs grâce au validateur => https://validator.w3.org

Tu peux utiliser à la place les attributs data-*

Á la place d'utiliser l'attribut onclick utilise un écouteur d'évènement voir

• https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
• https://www.pierre-giraud.com/javascript-apprendre-coder-cours/addeventlistener-gestion-evenement/

Tu as oublié de nous transmettre ta fonction afficher_divs();

Et pour terminer pas de width: 100% sur un block en CSS Lire : https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

Tu trouveras toues les réponses sur ce cour :

openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web/5577491-modifiez-le-dom

Cordialement.

Merci, je vais regarder ça.

Voilà mon script que je n'arrivais pas à transmettre :

function afficher_divs(n){
document.getElementsByName(n).style.display='none';
}

Ca fonctionne avec document.getElementById div mais pas avec document.getElementsByName (vu réponse 1)

J'ai essayé avec les sélection par class en les changeant :

function afficher_divs(){
	 document.getElementsByClassName('rows').className = "is_visible";
}

Ca ne fonctionne pas non plus.

Pour les width, je n'ai pas de padding mais je vais les passer en auto.

-
Edité par nicklarson 7 janvier 2021 à 14:06:30

Normal que ça ne fonctionne pas : tu manipule document.getElementsByClassName() comme s'il s'agissait d'un élément. Or c'est d'une collection, un tableau. Il te faut donc travailler sur chacun des éléments qu'il contient via une boucle.

Cordialement.

Ok avec

while(i<5){document.getElementById('rows')[i].className = "is_visible";}

Concrètement, j'ai 5 types de données issues d'une base. j'ai fait un input radio avec 5 options (6 avec "tout afficher").

Je souhaiterai que le visiteur puisse n'afficher uniquement les données avec le type choisi par l'option checkée. Il y a bien Ajax mais je n'y comprends pas grand chose, j'essaye donc avec javascript.

En faisant une requête générale (pour tout afficher, et par date croissante), je souhaite n'afficher que ces données et masquer les autres.

on bascule ici sur le php, mais voici la structure de ma base :

Id | type | date

j'ai donc utilisé le type pour l'attribut  class. J'aurais aussi pu regrouper par type dans un div, mais je souhaite garder le classement par date.

Pouvez-vous m'aiguiller ?

Merci

« Je souhaiterai que le visiteur puisse n'afficher uniquement les données avec le type choisi par l'option checkée »

Il te faut mettre une condition dans ta boucle... qui au passage est infinie, vu que rien ne vient modifier l'itérateur.

Oui, mon JS n'est pas complet. J'ai trouvé une alternative en affichant ou pas le type de données souhaitées :

html :

<div class="rows" id="VTT_1">Element 1.1</div>
<div class="rows" id="ROUTE_2">Element 2.1</div>
<div class="rows" id="VTT_3">Element 1.2</div>
<div class="rows" id="VTT_4">Element 1.3</div>
<div class="rows" id="ROUTE_5">Element 2.2</div>
	
<input type="button" value="VTT" onclick="afficher_divs('VTT_')">

<input type="button" value="ROUTE" onclick="afficher_divs('ROUTE_')">

CSS :

.rows{
display:none;
}
	
.is_visible{
width:100%;
height:20px;
display:block;
}

javascript :

function afficher_divs(n){
    
var i=0;
    
    while(i<50) {
          var element = document.getElementById(n + i);element.classList.toggle("is_visible");
    i++;}   
}

Ca ne fonctionne que pour la première requête

-
Edité par nicklarson 8 janvier 2021 à 20:24:05

J'ai fini par trouver une solution (par des ID nommées dynamiquement pour chaque type) et donc un changement de classe sur ces ID au clic sur le bouton correspondant.

Je mets le sujet en résolu. Si vous souhaitez le code relancez le sujet.

Merci pour les réponses.