11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je coince sur une fonction javascript me permettant d'afficher ou cacher un element en fonction de son id ou name.
La fonction suivante fonctionne très bien:
	
function debutfin(nom)
{
var pr = document.[b]getElementById[/b](nom);

if (pr.style.display == "block") {
pr.style.display = "none";
} else {
pr.style.display = "block";
}
}
,

Par contre celle ci pas tout:

	function debutfin(nom)
{
var pr = document.[b]getElementByName[/b](nom);

if (pr.style.display == "block") {
pr.style.display = "none";
} else {
pr.style.display = "block";
}
}

Je ne vois pas ou est le pb Smiley ohwell
Merci d'avance pour vos réponses Smiley smile
Modifié par batssa (15 Apr 2008 - 10:57)
Modérateur
Salut, Smiley smile

Il faut bien mettre getElementsByName mais, comme te l'a précisé dew, cette méthode retourne un "tableau" d'éléments et non un seul élément.

Pour pouvoir appliquer la propriété style, il faut donc que tu indiques le numéro d'ordre de l'élément du "tableau" ou faire une boucle pour traiter chacun d'entre eux :
var aPr = document.getElementsByName(nom);
aPr[0].style.display = 'none';

var aPr = document.getElementsByName(nom);
var iPr = aPr.length;
while(iPr-- > 0) aPr[iPr].style.display = 'none';


Le mieux serait aussi d'appliquer une classe CSS et non de passer par l'objet style car il est préférable de laisser chaque langage à sa tache. Cela donnerait :
var aPr = document.getElementsByName(nom);
var iPr = aPr.length;
while(iPr-- > 0) aPr[iPr].className = 'hidden';

avec :
.hidden {display:none;}


Dernier point : Plutôt que de sélectionner ton élément au sein même de tes fonctions, mieux vaut le passer en paramètre. Ainsi, tu peux choisir d'appliquer ta fonction à un ou plusieurs éléments sans avoir à la modifier (ou en créer 2) :
function display(oEl) {
    return oEl.className = (oEl.className == 'hidden') ? '' : 'hidden';
}

Modifié par koala64 (15 Apr 2008 - 10:49)