mettre en MAJ toute balise text avec le DOM

**taratata2015** · 02/12/2012, 13h29

bonjour à tous!

je cherche à effectuer une boucle permettant de mettre en majuscule toute balise <p> avec un identifiant donné. Je passe par les commande du DOM.
Dand le code ci-dessous, le nb de balise <p> est 1 alors qu'il y en a deux dans le html. Pourtant la boucle est présente!

-- html --

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
 
<head>
 
<script type="text/javascript" src="MettreEnMajuscule.js"></script>
 
</head>
 
 
<body>
 
<p id="M">1 texte balise p</p>
<p id="M">2 texte balise p</p>
 
 
<button onclick="enMajuscules(document.getElementById('M'));">Click Me</button>
 
 
</body>
 
</html>

-- JS --

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function enMajuscules(n) {
 
	/* Mise en majuscule */ 
	if (n.nodeType == 3 /*Node.TEXT_NODE*/) {
		n.data = n.data.toUpperCase();
		alert("1")
	}
 
	/* Incrémentation du compteur */
	else
		{
 
			// hasChildNodes renvoie une valeur booléenne indiquant si l'élement actuel possède des nœuds enfants.
			if (n.hasChildNodes()) {
			alert("hasChildNodes renvoie la valuer : " + n.hasChildNodes());
 
				// L'attribut javascript childNodes de l'objet Node permet de récupérer tous les noeuds enfants du noeud.
				// On vérifie d'abord si l'objet n'est pas vide, c.-à-d. s'il a des enfants
				var enfants = n.childNodes;
				alert("Nb de noeuds enfants : " + enfants.length);
 
				for(var nb = 0; nb < enfants.length; nb++){
  					if(enfants[nb].nodeType==3){
 
    				alert("-- Trouve balise <p></p> à Identification 'M' --");
    				alert("Nb total de balise <p></p> à Identification 'M'  : " + enfants.length);
    				enfants[nb].data = enfants[nb].data.toUpperCase();
  					}
  					else{
 
    					alert("!!");
 
  					}
				}
 
			}
 
	}
}

merci d'avance de votre aide!

**Bovino** · 02/12/2012, 14h20

Répété un nombre incalculable de fois : un id doit être unique dans la page !

Mais à part ça, inutile de passer par JavaScript quand on en a pas besoin !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<p class="M">1 texte balise p</p>
<p class="M">2 texte balise p</p>

et en CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.M{
    text-transform: capitalize;
}

**taratata2015** · 02/12/2012, 18h26

c'est trouvé ...

-- html --

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
 
<head>
 
<title>Mettre en MAJUSCULE le texte de toutes les balises <p></p></title>
 
<script type="text/javascript" src="MettreEnMajuscule.js"></script>
 
</head>
 
 
<body>
 
<p>1 texte dans balise p</p>
<a>3 texte dabs balise a</a>
<br><br>
<span>4 texte dans balise span</span>
<br><br>
<table>
	<th>5 texte balise dans Table/TH<th>
</table>
<p>2 texte dans balise p</p>
 
<button onclick="enMajuscules(document.getElementsByTagName());">Mettre en MAJUSCULE le texte de toutes les balises type P</button>
 
 
</body>
 
</html>

-- js --

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
// Met en Majuscule le texte contenu dans toutes les balises de type <p></p>
 
function enMajuscules() 
{
 
  var table = document.getElementsByTagName("p").length;
  alert("-- Nb total de balise <p></p> dans le document.  " + table + " --");
 
  for(var nb = 0; nb<=table; nb++) {
 
  document.getElementsByTagName('p')[nb].style.textTransform="UpperCase";			
			}		
}

a+

**NoSmoking** · 02/12/2012, 18h58

Bonjour,
bel exercice de style pour faire ce que le CSS fait simplement

A l'exception qu'il ne s'agit pas de text-transform: capitalize mais de text-transform: uppercase.

Concernant ton script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for(var nb = 0; nb<=table; nb++)

plantera lorsque nb sera égal à table.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button onclick="enMajuscules(document.getElementsByTagName());">

pourquoi passer en paramètre une méthode, incomplète d’ailleurs pour ne rien en faire

plus d'autre optimisations possible

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function enMajuscules(){
  var oElements = document.getElementsByTagName("p");
  var i, nb = oElements.length;
//  alert("-- Nb total de balise <p></p> dans le document.  " + nb + " --");
  for( i = 0; i < nb; i++) {
    oElements[i].style.textTransform="UpperCase";
  }
}

mais bon le CSS est bien suffisant.

http://torgar.developpez.com/glossai...#texttransform

mettre en MAJ toute balise text avec le DOM

JavaScript

Discussions similaires

Partager

Partager