Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript getElementById et

getElementById et

8 réponses
Avatar
jush
Bonjour,

J'ai une page html contenant pas mal de <div> sous cette forme :

<div Class="Contenu" id="Pro">
Bla bla bla bla bla
</div>
<div Class="Contenu" id="Perso">
Bla bla bla bla bla
</div>
<div Class="Contenu" id="Loisir">
Bla bla bla bla bla
</div>

d'autre par j'ai un menu constitué de liens :
--> Pro (<a href="#" onClick="Show(Pro);">)
--> Perso (<a href="#" onClick="Show(Perso);">)
--> Loisir (<a href="#" onClick="Show(Loisir);">)

j'aimerai au clic sur un lien faire appaitre le div correspondant. J'ai
donc fait 3 fonctions :

function Show(showid)
{
hideAllDiv();
document.getElementById(showid).style.visibility="visible";
document.getElementById(showid).style.display="inline";
}

function hideDiv(divId)
{
document.getElementById(divId).style.visibility="hidden";
document.getElementById(divId).style.display="none";
}

function hideAllDiv()
{
ListId = ['Perso','Pro','Loisir'];
nb = ListId.length;
for (i=0; i<nb; i++)
{
hideDiv(document.getElementsById(ListId)[i].id);
}
}

Mais, et sinon je ne serai pas la, ca ne fonctionne pas .....
Ou est ce que j'ai fait une erreur ?

Merci
--
Jush
Signaler un problème avec ce contenu

8 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Thibault TAILLANDIER
Bonjour,

J'ai une page html contenant pas mal de <div> sous cette forme :

<div Class="Contenu" id="Pro">
Bla bla bla bla bla
</div>
<div Class="Contenu" id="Perso">
Bla bla bla bla bla
</div>
<div Class="Contenu" id="Loisir">
Bla bla bla bla bla
</div>



Salut,
C'est bien propre ca, c'est bien :-)

d'autre par j'ai un menu constitué de liens :
--> Pro (<a href="#" onClick="Show(Pro);">)
--> Perso (<a href="#" onClick="Show(Perso);">)
--> Loisir (<a href="#" onClick="Show(Loisir);">)


Il faut rajoute des return false; :
onClick="Show(Pro); return false;"
Sinon le navigateur va aller a l'url "#" quand meme apres avoir effectué
le javascript.


j'aimerai au clic sur un lien faire appaitre le div correspondant. J'ai
donc fait 3 fonctions :

function Show(showid)
{
hideAllDiv();
document.getElementById(showid).style.visibility="visible";
document.getElementById(showid).style.display="inline";
}

function hideDiv(divId)
{
document.getElementById(divId).style.visibility="hidden";
document.getElementById(divId).style.display="none";
}

function hideAllDiv()
{
ListId = ['Perso','Pro','Loisir'];
nb = ListId.length;
for (i=0; i<nb; i++)
{
hideDiv(document.getElementsById(ListId)[i].id);


hop hop hop ... getElementById, sans "s"
et c'est : document.getElementById(ListId[i]).id

le reste me semble bon.

}
}

Mais, et sinon je ne serai pas la, ca ne fonctionne pas .....
Ou est ce que j'ai fait une erreur ?


Je te conseille Firefox (pour surfer notamment), mais pour développer le
javascript aussi.
Il a une console JavaScript bien utile ...


Merci


De rien
--
Thibault

Avatar
jush

Bonjour,

J'ai une page html contenant pas mal de <div> sous cette forme :

<div Class="Contenu" id="Pro">
Bla bla bla bla bla
</div>
<div Class="Contenu" id="Perso">
Bla bla bla bla bla
</div>
<div Class="Contenu" id="Loisir">
Bla bla bla bla bla
</div>



Salut,
C'est bien propre ca, c'est bien :-)

d'autre par j'ai un menu constitué de liens :
--> Pro (<a href="#" onClick="Show(Pro);">)
--> Perso (<a href="#" onClick="Show(Perso);">)
--> Loisir (<a href="#" onClick="Show(Loisir);">)



Il faut rajoute des return false; :
onClick="Show(Pro); return false;"
Sinon le navigateur va aller a l'url "#" quand meme apres avoir effectué
le javascript.


j'aimerai au clic sur un lien faire appaitre le div correspondant. J'ai
donc fait 3 fonctions :

function Show(showid)
{
hideAllDiv();
document.getElementById(showid).style.visibility="visible";
document.getElementById(showid).style.display="inline";
}
function hideDiv(divId)
{
document.getElementById(divId).style.visibility="hidden";
document.getElementById(divId).style.display="none";
}
function hideAllDiv()
{
ListId = ['Perso','Pro','Loisir'];
nb = ListId.length;
for (i=0; i<nb; i++)
{
hideDiv(document.getElementsById(ListId)[i].id);



hop hop hop ... getElementById, sans "s"
et c'est : document.getElementById(ListId[i]).id

le reste me semble bon.

}
}

Mais, et sinon je ne serai pas la, ca ne fonctionne pas .....
Ou est ce que j'ai fait une erreur ?



Je te conseille Firefox (pour surfer notamment), mais pour développer le
javascript aussi.
Il a une console JavaScript bien utile ...


Cela fait un moment deja que je suis passé sous Firefox, ainsi que sous
thunderbird pour les mails


Merci



De rien


Merci pour la correction de la coquille, mais ca ne change pas grand
chose mis a la reaction de ma page .... ca ne bouge tout simplement pas
:) (enfin :( plutot).
Comme un schema vaut mieux qu'un long discours, la page en question est
disponible ici:
http://guillaume.gentien.free.fr/mael/index.html
et la CSS au ca ou
http://guillaume.gentien.free.fr/mael/style.css

merci de votre aide
--
Jush


Avatar
Thibault TAILLANDIER


function hideAllDiv()
{
ListId = ['Perso','Pro','Loisir'];
nb = ListId.length;
for (i=0; i<nb; i++)
{
hideDiv(document.getElementsById(ListId)[i].id);




hop hop hop ... getElementById, sans "s"
et c'est : document.getElementById(ListId[i]).id

le reste me semble bon.

Je te conseille Firefox (pour surfer notamment), mais pour développer
le javascript aussi.
Il a une console JavaScript bien utile ...


Merci




De rien



Merci pour la correction de la coquille, mais ca ne change pas grand
chose mis a la reaction de ma page .... ca ne bouge tout simplement pas
:) (enfin :( plutot).
Comme un schema vaut mieux qu'un long discours, la page en question est
disponible ici:
http://guillaume.gentien.free.fr/mael/index.html
et la CSS au ca ou
http://guillaume.gentien.free.fr/mael/style.css

merci de votre aide


Tu n'a pas corrigé le vrai probleme ... il n'y a pas que le "s"
j'ai mis (ListId[i]) au lieu de (ListId)[i] ...

Firefox te le dit tout de suite ...
Menu Outils > Console JavaScript

Erreur : document.getElementById(ListId) has no properties
Fichier Source : http://guillaume.gentien.free.fr/mael/index.html
Ligne : 29


Cya
--
Thibault



Avatar
Thibault TAILLANDIER


Tu n'a pas corrigé le vrai probleme ... il n'y a pas que le "s"
j'ai mis (ListId[i]) au lieu de (ListId)[i] ...

Firefox te le dit tout de suite ...
Menu Outils > Console JavaScript

Erreur : document.getElementById(ListId) has no properties
Fichier Source : http://guillaume.gentien.free.fr/mael/index.html
Ligne : 29


Cya


Au temps pour moi.
Le code correct est :

function hideAllDiv() {
ListId = ['Perso','Pro','Loisir'];
for (i=0; i<ListId.length; i++) { hideDiv(ListId[i]); }
}
Il suffit juste de passer le nom à hideDiv puisque c'est lui qui fait le
document.getElementById derriere.
De plus, ca te mettra encore une erreur, mais c'est parce qu'il te
manque la balise div id="loisir" ...

pour éviter ca :
function Show(showid) {
hideAllDiv();
var obj = document.getElementById(showid);
if (obj) {
obj.style.visibility="visible";
obj.style.display="inline";
}
}
function hideDiv(divId){
var obj = document.getElementById(divId);
if (obj) {
obj.style.visibility="hidden";
obj.style.display="none";
}
}

Par contre a ce moment la j'ai eu des problemes de css ... les div
s'affichaient sous le menu, à gauche ..

Bonne continuation.
Bye
--
Thibault

Avatar
jush



function hideAllDiv()
{
ListId = ['Perso','Pro','Loisir'];
nb = ListId.length;
for (i=0; i<nb; i++)
{
hideDiv(document.getElementsById(ListId)[i].id);





hop hop hop ... getElementById, sans "s"
et c'est : document.getElementById(ListId[i]).id

le reste me semble bon.

Je te conseille Firefox (pour surfer notamment), mais pour développer
le javascript aussi.
Il a une console JavaScript bien utile ...




Merci





De rien




Merci pour la correction de la coquille, mais ca ne change pas grand
chose mis a la reaction de ma page .... ca ne bouge tout simplement
pas :) (enfin :( plutot).
Comme un schema vaut mieux qu'un long discours, la page en question
est disponible ici:
http://guillaume.gentien.free.fr/mael/index.html
et la CSS au ca ou
http://guillaume.gentien.free.fr/mael/style.css

merci de votre aide



Tu n'a pas corrigé le vrai probleme ... il n'y a pas que le "s"
j'ai mis (ListId[i]) au lieu de (ListId)[i] ...

Firefox te le dit tout de suite ...
Menu Outils > Console JavaScript

Erreur : document.getElementById(ListId) has no properties
Fichier Source : http://guillaume.gentien.free.fr/mael/index.html
Ligne : 29


Cya


Arfff désolé de ne pas avoir tout corrigé (patapé pamechant ;))
j'ai profité de la console de déboguage pour voir que j'avais une erreur
sur mon indice dans la boucle ce qui le faisait planter et qui donc
sortir avant d'afficher la partie concernée.

Mais je tombe sur un autre souci (si je peux user et abuser encore un
peu de votre patience)

Mon <div Class="Content" id="XXX"> s'affiche bien mais il ne semble pas
prendre en compte les propriété de Class="Content" concernant le
positionnement.
(je sais que c'est un peu [HS] de ce forum veuillez m'en excuser)

Merci
--
Jush




Avatar
Thibault TAILLANDIER




function hideAllDiv()
{
ListId = ['Perso','Pro','Loisir'];
nb = ListId.length;
for (i=0; i<nb; i++)
{
hideDiv(document.getElementsById(ListId)[i].id);






hop hop hop ... getElementById, sans "s"
et c'est : document.getElementById(ListId[i]).id

le reste me semble bon.

Je te conseille Firefox (pour surfer notamment), mais pour
développer le javascript aussi.
Il a une console JavaScript bien utile ...





Merci






De rien





Merci pour la correction de la coquille, mais ca ne change pas grand
chose mis a la reaction de ma page .... ca ne bouge tout simplement
pas :) (enfin :( plutot).
Comme un schema vaut mieux qu'un long discours, la page en question
est disponible ici:
http://guillaume.gentien.free.fr/mael/index.html
et la CSS au ca ou
http://guillaume.gentien.free.fr/mael/style.css

merci de votre aide




Tu n'a pas corrigé le vrai probleme ... il n'y a pas que le "s"
j'ai mis (ListId[i]) au lieu de (ListId)[i] ...

Firefox te le dit tout de suite ...
Menu Outils > Console JavaScript

Erreur : document.getElementById(ListId) has no properties
Fichier Source : http://guillaume.gentien.free.fr/mael/index.html
Ligne : 29


Cya



Arfff désolé de ne pas avoir tout corrigé (patapé pamechant ;))
j'ai profité de la console de déboguage pour voir que j'avais une erreur
sur mon indice dans la boucle ce qui le faisait planter et qui donc
sortir avant d'afficher la partie concernée.

Mais je tombe sur un autre souci (si je peux user et abuser encore un
peu de votre patience)

Mon <div Class="Content" id="XXX"> s'affiche bien mais il ne semble pas
prendre en compte les propriété de Class="Content" concernant le
positionnement.
(je sais que c'est un peu [HS] de ce forum veuillez m'en excuser)

Merci


Il faut rajouter position: absolute; dans la class .Content.
Ca a l'air de marcher mieux ...
Mais j'avoue ne pas savoir pourquoi il faudrait les deux :-)
Il faudrait que je regarde plus ne détail les autres class CSS :-p

Bye
--
Thibault





Avatar
jush





function hideAllDiv()
{
ListId = ['Perso','Pro','Loisir'];
nb = ListId.length;
for (i=0; i<nb; i++)
{
hideDiv(document.getElementsById(ListId)[i].id);







hop hop hop ... getElementById, sans "s"
et c'est : document.getElementById(ListId[i]).id

le reste me semble bon.

Je te conseille Firefox (pour surfer notamment), mais pour
développer le javascript aussi.
Il a une console JavaScript bien utile ...






Merci







De rien






Merci pour la correction de la coquille, mais ca ne change pas grand
chose mis a la reaction de ma page .... ca ne bouge tout simplement
pas :) (enfin :( plutot).
Comme un schema vaut mieux qu'un long discours, la page en question
est disponible ici:
http://guillaume.gentien.free.fr/mael/index.html
et la CSS au ca ou
http://guillaume.gentien.free.fr/mael/style.css

merci de votre aide





Tu n'a pas corrigé le vrai probleme ... il n'y a pas que le "s"
j'ai mis (ListId[i]) au lieu de (ListId)[i] ...

Firefox te le dit tout de suite ...
Menu Outils > Console JavaScript

Erreur : document.getElementById(ListId) has no properties
Fichier Source : http://guillaume.gentien.free.fr/mael/index.html
Ligne : 29


Cya




Arfff désolé de ne pas avoir tout corrigé (patapé pamechant ;))
j'ai profité de la console de déboguage pour voir que j'avais une
erreur sur mon indice dans la boucle ce qui le faisait planter et qui
donc sortir avant d'afficher la partie concernée.

Mais je tombe sur un autre souci (si je peux user et abuser encore un
peu de votre patience)

Mon <div Class="Content" id="XXX"> s'affiche bien mais il ne semble
pas prendre en compte les propriété de Class="Content" concernant le
positionnement.
(je sais que c'est un peu [HS] de ce forum veuillez m'en excuser)

Merci



Il faut rajouter position: absolute; dans la class .Content.
Ca a l'air de marcher mieux ...
Mais j'avoue ne pas savoir pourquoi il faudrait les deux :-)
Il faudrait que je regarde plus ne détail les autres class CSS :-p

Bye


En effet, en mettant position: absolute; cela fonctionne, mais je ne
suis pas assez calé pour comprendre pourquoi.

Merci a vous et continuez a aider les 'ti debutants de ma trempe

--
Jush






Avatar
ASM

En effet, en mettant position: absolute; cela fonctionne, mais je ne
suis pas assez calé pour comprendre pourquoi.


Sans même être allé voir le test proposé
je pense que c'est parceque
tu fais afficher ton div en *inline* (comportement pour du texte, une image, etc)
au lieu de le faire en *block* (comportement normal d'un div)

Donc, et bien qu'arrivant un peu tard, à mon idée
essayer de corriger comme suit :

<div Class="Contenu" id="Pro">
Bla bla bla bla bla
</div>
<div Class="Contenu" id="Perso">
Bla bla bla bla bla
</div>
<div Class="Contenu" id="Loisir">
Bla bla bla bla bla
</div>

d'autre par j'ai un menu constitué de liens :
--> Pro (<a href="#" onClick="Show(Pro);">)
--> Perso (<a href="#" onClick="Show(Perso);">)
--> Loisir (<a href="#" onClick="Show(Loisir);">)


non ! il faut :

<a href="#" onclick="Show('Pro'); return false;">Pro</a>

- le nom de l'id entre apostrophes
- return false; dans le onclick pour annuler le href du lien

function Show(showid)
{
hideAllDiv();
document.getElementById(showid).style.visibility="visible";
document.getElementById(showid).style.display="inline";


document.getElementById(showid).style.display="block";

ou

with(document.getElementById(showid).style) {
visibility="visible";
display="block";
}

}

function hideDiv(divId)
{
document.getElementById(divId).style.visibility="hidden";
document.getElementById(divId).style.display="none";
}

function hideAllDiv()
{
ListId = ['Perso','Pro','Loisir'];
nb = ListId.length;
for (i=0; i<nb; i++)
{
hideDiv(document.getElementsById(ListId)[i].id);


Hou là là ! pourtant c'est si simple !

hideDiv(ListId[i]);

}
}

Mais, et sinon je ne serai pas la, ca ne fonctionne pas .....
Ou est ce que j'ai fait une erreur ?


Plein partout ;-))

Et contrairement à ce que j'insinue + haut,
j'ai vérifié dans ta page ce que je te corrige ici
et c'est nickel-chrome chez moi
Pense à virer le *position: absolute;* de ta classe *Content*

Merci


de rien


--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************