11548 sujets

JavaScript, DOM et API Web HTML5

Remplacement avec replaceChild

Bonjour,

Voilà je suis en train de tester un script très simple qui consiste à remplacer des balises <input type="button" /> en des <div>. Le problème c'est que la fonction ne remplace que trois de mes six bouton. J'ai cherché et recherché, mais je n'arrive pas à trouver le problème. Le code n'est pas définitif, c'est juste un exemple pour tester les propriétés et méthode JS.

Voilà les codes :

index.html

<html>
	<head>
		<script type="text/javascript" src="./main.js"></script>
	</head>
	<body>
		<form id="palette">
			<input type="button" value="url" />
			<input type="button" value="b" />
			<input type="button" value="i" />
			<input type="button" value="u" />
			<input type="button" value="c" />
			<input type="button" value="img" />				
		</form>
	</body>
</html>


main.js

window.onload = init;

function init() {
	convertBouton();
}
function convertBouton() {
	var inputs  = document.getElementsByTagName('input');
	
	for(i=0; i<inputs.length; i++) {
		var item = inputs.item(i);		
		if (item.getAttribute('type')=='button') {			
			var bouton = document.createElement('div');
			bouton.setAttribute('id', i);
			var text = document.createTextNode(i);			
			bouton.appendChild(text);
			
			item.parentNode.replaceChild(bouton, item);
		}
	}
}

Modifié par bernisage (12 May 2007 - 19:15)
Salut,

alors dans le genre ça marche comme ça mais me demande pas pourquoi

( a mon avis y a quequechose qui fonctionne en pile, note que i reste egale a 0 tous le temps dans mon code)

de plus si j'utilise inputs.length directement dans la boucle il est réévalué a chaque fois et diminue d'un a chaque fois.

<hs> qui me propose un bon site pour comprendre les trucs DOM. <hs>

la solution mystere:

function init() {
	convertBouton();
}
function convertBouton() {
  
	var inputs  = document.getElementsByTagName('input');
	var cmp = inputs.length;
	for(j=0; j<cmp; j++) {
	    i=0;
		var item2 = inputs.item(i);	
		if (item2.getAttribute('type')=='button') {			
			var bouton = document.createElement('div');
			 
			bouton.setAttribute('id', j);
			var text = document.createTextNode(j);			
			bouton.appendChild(text);
			 
			item2.parentNode.replaceChild(bouton, inputs[i][i]);
		}
	}
}


pascal
[/i] [/i]
edit j'espere qu'avec les pb de balise italique mon code marche encore.... je crois avoir arrangé ca en doublant le i entre []
Modifié par CPascal (12 May 2007 - 20:19)
Ton code marche parfaitement dans le cas présent, pas de soucis.
Peut-être que les éléments de l'arbre inputs[..] ne sont pas structuré correctement en mémoire dès lors qu'on les manipule. C'est assez difficile à comprendre le pourquoi du comment.

PS : Si quelqu'un a compris...

Moi qui pensais me lancer dans quelque chose de simple, c'est bien parti Smiley biggrin

MAJ : Il reste néanmoins un léger problème qui fait que le code n'est pas parfait.
Je rappelle que le but du code est juste de remplacer les <input type="button" />. Si je rajoute un input <type="submit" /> en plein au milieu des autres, la solution que tu m'as donnée ne marche plus. Dans une page complexe, ce sera sûrement le cas :

index.html

<html>
	<head>
		<script type="text/javascript" src="./main.js"></script>
	</head>
	<body>
		<form id="palette">
				<input type="button" value="url" />
				<input type="button" value="b" />
				<input type="button" value="i" />			
				<input type="submit" value="h" />			
				<input type="button" value="u" />
				<input type="button" value="c" />
				<input type="button" value="img" />
		</form>
	</body>
</html>


main.js

window.onload = init;

function init() {
	convertBouton();
}
function convertBouton() {
	var inputs  = document.getElementsByTagName('input');

	var cmp = inputs.length;
	for(j=0; j<cmp; j++) {
	    i=0;
		var item = inputs.item(i);	
		if (item.getAttribute('type')=='button') {
			var bouton = document.createElement('div');
			bouton.setAttribute('id', j);
			var text = document.createTextNode(j);
			bouton.appendChild(text);
			item.parentNode.replaceChild(bouton, inputs[i][i]);
		}
	}
}
[/i][/i]
Modifié par bernisage (13 May 2007 - 01:52)
vu que tu effectues un remplacement noeud élement ==> noeud élément, détecte simplement le nombre de balise de ton formulaire;

var cadre=document.getElementById("palette");
var inputs=cadre.getElementsByTagName("*");

for(j in inputs){
	if(inputs[j].type=="button"){
		d=document.createElement("div");
		d.appendChild(document.createTextNode(inputs[j].value));		
		d.id=j;
		cadre.replaceChild(d,inputs[j])
	}
}
Sujet clos
Aller à