Affecter attributs manière dynamique

7 mars 2025 à 18:29:48

Bonjour,

Il me semble que la valeur d'un attribut affecter avec la méthode setAttribute(name, value) ne peut être qu'une chaine de caractère car toutes autres formes sera automatiquement transformées en string.

Du coup, sauriez vous comment peut-on affecter dans la boucle ci-dessous à chacun des dix boutons ci-dessous un ID compris entre 1 et 10?

	<script type="text/javascript">
		for(var i=0;i<10;i++){
			var bouton=document.createElement("button");
			document.body.appendChild(bouton);
			bouton.setAttribute("id",i);
			bouton.setAttribute("class","vert");
		}
	</script>

bouton.setAttribute("id",i); ne semble en effet pas fonctionner alors que bouton.setAttribute("class","vert"); semble bien fonctionner.

-
Edité par PierrePetitjean 7 mars 2025 à 18:34:55

AbcAbc6

7 mars 2025 à 19:34:23

Bonsoir,

Qu'est-ce qui te fait dire que cela ne fonctionne pas? Pour ma part si :

Quel navigateur utilises-tu? (J'ai testé sur Firefox Windows 11) Et comment insères-tu ton script?

PS : Il existe les mots clés let ou const pour la déclaration de variable. :magicien:

Note : Si je me rappelle bien un identifiant ne commence jamais par un chiffre!!

-
Edité par AbcAbc6 7 mars 2025 à 19:36:10

PierrePetitjean

8 mars 2025 à 12:10:20

Merci de ta réponse AbcAbc6,

J'ai ce code, mais je ne comprends pas pourquoi le deuxième bouton n'est pas colorié en rouge.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Test</title>
	<style>
	.vert{
			background-color:green;
		}
	#2{
			background-color:red;
		}
	</style>
</head>
<body>
	<script type="text/javascript">
		for(var i=1;i<11;i++){
			var bouton=document.createElement("button");
			document.body.appendChild(bouton);
			if(i%2==0){
				bouton.setAttribute("id",i);
			}
			if(i%2!=0){
			bouton.setAttribute("class","vert");
			}
		}
	</script>
</body>
</html>

Lamecarlate

8 mars 2025 à 17:19:45

C'est parce qu'un id commençant par un chiffre doit être échappé en CSS. Pour le calculer : https://mothereff.in/css-escapes. Mais franchement tu auras plus vite fait de mettre un préfixe avec des lettres, pour avoir "bouton-1" etc.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

PierrePetitjean

8 mars 2025 à 18:09:05

Merci Lamecarlate,

Tu sembles avoir raison, tu veux dire faire des variables à la chaine dans une boucle? Je ne sais pas le faire, j'ai déjà essayé mais jamais réussi.

Lamecarlate

8 mars 2025 à 18:24:12

Il s'agit de faire une concaténation. À ta ligne 22, au lieu d'écrire bouton.setAttribute("id",i); tu mets bouton.setAttribute("id","bouton-" + i); et ça devrait faire l'affaire