Sélectionner plusieurs éléments JS

Résolu
Bonjour, je viens ici pour une simple question.

document.getElementById('unBouton_' + *).disabled = true;


Je m'explique, j'ai plusieurs "unBouton", et là seul chose qui change c'est l'id que je rajoute juste après je underscore (ex : unBouton_12).

Donc je voudrais bloquer tout mes boutons, mais l'opérateur '*' ou '%' je fonctionnent pas, ou je m'y prends mal.

Une idée ?

Merci d'avance.

2 réponses

  1. Contributeur
    Salut

    non tu ni arrivera pas comme ca ;-)

    le plus simple est de donner une class a tes boutons et de faire un
    getElementByClassName('taClass').disabled = true;

    https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByClassName

    a+
    1. Bonjour

      getElementByClassName n'existe pas. Comme l'indique ton lien, c'est getElementsByClassName.
      La différence, c'est le "s" à "Element".
      Car de nombreux élements peuvent avoir la même classe : getElementsByClassName rend une liste, alors qu'un id est unique et donc getElementById rend un élément unique.
      getElementsByClassName rend une liste, et une liste n'a pas de propriété "disabled".
      getElementsByClassName('taClass').disabled = true;
      n'est donc pas possible.
      Il faut balayer la liste obtenue avec un for..in et faire le .disabled=true sur chaque élément.
    2. Modérateur
      salut à toi RAD ;)
    3. Salut tout le monde !

      Merci de vos réponses, mais j'ai essayé avec un getElementsByClassName mais ça ne fonctionne pas... et je ne sais pas pourquoi...
    4. je suis en train d'essayer sur une page vierge... je vous tient au courant de mon avancé ;)
    5. donc voici ce que je viens de faire mais ça ne fonctionne pas :/

      page HTML:
      <!DOCTYPE html>
      
      <html>
      
      	<head>
      		<script src="test.js"></script>
      	</head>
      
      	<body style="width: 1100px; margin: auto;">
      		
      		<a class="testClass" id="1" onClick="test(1)">TEST</a>
      			<br />
      		<a class="testClass" id="2" onClick="test(2)">TEST</a>
      			<br />
      		<a class="testClass" id="3" onClick="test(3)">TEST</a>
      			<br />
      		<a class="testClass" id="4" onClick="test(4)">TEST</a>
      			<br />
      		<a class="testClass" id="5" onClick="test(5)">TEST</a>
      		
      	</body>
      </html>


      page JS:
      function test(id){
      	document.getElementsByClassName('testClass').innerHTML="REUSSI";
      	document.getElementById(id).innerHTML="boutonAvecMonID";
      }


      J'ai juste le texte du lien sur lequel je clique qui est remplacé par "boutonAvecMonID". mais tous les autres liens ne changent pas...
  2. Salut, je ne sais pas si il existe un truc prédéfini pour faire ceci mais tu peux créer une boucle pour le faire :

    var nombre_id = 0;
    var id_total = <ton nombre d'id>
    while (nombre_id != id_total) { nombre_id++;
    document.getElementById('unBouton_' + nombre_id).disabled = true; }


    Un truc dans le genre :)
    1. Salut jiantox, merci de ta réponse, mais le problème c'est que ces différents boutons viennent d'une base de données... et donc des fois je peux avoir un trou dans l'ID. Je veux dire par là que je peux passer du 1 au 4 sans qu'il n'y ai de 2 et 3... donc le javascript va planté... :/
    2. Tu peux donc tester si un ID existe avant d'essayer de le masquer :

      while (nombre_id != id_total) { nombre_id++;
      if (document.getElementById('unBouton' + nombre_id)) {
      document.getElementById('unBouton_' + nombre_id).disabled = true; } }
    3. merci jiantox, du coup je viens de faire la méthode de "le père" ! Elle correspond mieux à mon système ;) Mais merci quand même de ton aide.

      A très bientôt sur CCM ;)