[DOM] Insertion de texte dans un div (innerHTML)

Version imprimable

15/02/2009, 19h27
jeremdu94

[DOM] Insertion de texte dans un div (innerHTML)

Bonjour,

Je suis un tout débutant donc je ne connais pas tout et même pas grand chose.

J'ai un div dans ma page:

Code:

<div id="barre"> </div>

Il est pré formaté avec une feuille de style.

Et donc avec une fonction que j'ai écrite qui est un booléen je voudrais que dans mon div s'affiche soit un message, soit l'autre mais je ne parvient pas à changer son contenu en fait... :(

Voilà ce que j'essaye:

Code:

document.getElementById("barre").innerHTML = "TEST TEST";

Je ne sais pas si c'est bon, surement que non puisque ca ne fonctionne pas ( rien de s'affiche jamais dans le div).

Là il est dans mon fichier .js directement (pas dans une fonction) car c'est la première fois que j'essaye de faire ca donc j'y vais pas à pas.

Donc, je ne vois pas mon erreur.. Peut-être que j'utilise mal innerHTML ?

Sauf que la console d'erreur de Firefox me renvoit:

Citation:

Erreur*: document.getElementById("barre") is null

Moi ce que je comprends c'est qu'il n'y a rien dans mon div, donc j'ai mis un   et même du texte mais ca ne change rien donc je ne sais pas ..

C'est surement simple mais bon là je sèche et Google n'est pas mon amis sur ce coup on dirait :(

Merci beaucoup si vous m'aidez
Cdlt
15/02/2009, 19h40
dragonno

Salut^^
Essaie avec : 'barre'
Même s'il n'y a rien dans ton div ça ne doit pas faire d'erreur un appel juste.

;)

Que je suis nul, j'avais oublié le principal^^
Le pc lit les instructions une par une ;)

Donc il charge ton fichier javascript ok ^^ mais à ce moment-là il ne connait pas ce que représente "barre" puisque il n'a pas encore chargé le reste de la page^^
par contre si tu appelle le div juste aprés que le pc en a eu connaissance ça marchera^^
15/02/2009, 19h46
jeremdu94

Bonsoir,

Merci pour ta réponse!

Alors avec les simples quote ca fait pareil.

Et sinon j'ai fait comme ceci dans mon <head></head>:

Code:

<script type="text/javascript" src="scripts/script.js"></script>

C'est bon? c'était de ça que tu parlais?

Merci!

EDIT: Comment faire pour appeler le div juste apres? :S
Je le met dans une fonction?
15/02/2009, 19h49
dragonno

UP on s'est croisé^^

Relis-moi ;)
15/02/2009, 20h40
jeremdu94

Re,

J'ai bien relu ton édition mais je ne vois pas comment appeler le fichier de mes scripts après la page puisque c'est dans le head?
Il faut le mettre dans une fonction? qui se chargera en mémoire et comme ca quand on l'exécutera le div sera chargé?

J'ai un peu de mal là ...

PS: je ferais attention à mes nom de fichiers JS ;)

Merci !!
15/02/2009, 21h57
dragonno
Tu as deux possibilités :

Soit tu place ton script directement dans la page, apres le div au lieu de le mettre dans le head.

Soit tu le laisse dans une page javascript mais alors tu le met dans une fonction que tu appelle à partir d'un script dans le body après le div ou bien à partir de n'importe quel évennement Onclick=" " de ta page.
par exemple avec un bouton ca ferait :

Dans ton fichier JS tu met ça :
Code:

1 2 3 4 5 6 7 8 function test() { if (document.getElementById) { document.getElementById("barre").innerHTML="Chui là !!!"; } }
La page HTML :
Code:

1 2 3 4 5 6 <Body> <div id="barre"></div> <input type="button" value="tester" onclick="test()"> </body>
Mais en gros ta compris le truc du javascript ^^ il execute que les codes et valeurs qu'il a chargé en mémoire déjà et donc qu'il connaît.
16/02/2009, 12h09
jeremdu94

Bonjour,

J'ai bien compris le système maintenant, merci!

Malheureusement ça ne concorde pas vraiment avec ce que je voulais faire :( donc je vais revoir mes algo pour faire autrement..

Merci encore de ton aide et ta réactivité!
16/02/2009, 19h48
Auteur
bonjour,

HTML et Javascript sont des langages interprétés.

Citation:

Envoyé par jeremdu94

Là il est dans mon fichier .js directement (pas dans une fonction)

Comme tu l'as précisé ton code n'est pas dans une fonction. Et ce bout de code est appelé lors du chargement de la page. Dans ton cas, lorsque getElementById() est appelé ton div n'est pas encore instancié du coup la fonction ne trouve pas l'objet en question d'où l'erreur :

Citation:

Erreur*: document.getElementById("barre") is null

Le mieux, comme il a été dit précédemment est de placer le code dans une fonction :
Code:

1 2 3 4 5 function taFonction() { document.getElementById("barre").innerHTML="Chui là !!!"; }
ensuite sache qu'il existe l'événement onload qui se déclenche lorsque toute ta page est chargée. Dans ton cas, elle te sera utile :
Code:

1 2 3 <body onload="taFonction()"> <div id="barre"></div>
là ton texte changera sans même que l'utilisateur ait besoin de cliquer sur un bouton. ;)

Citation:

Envoyé par jeremdu94

Malheureusement ça ne concorde pas vraiment avec ce que je voulais faire donc je vais revoir mes algo pour faire autrement..

Que voulais-tu faire exactement ?

pour du texte simple je préconiserais l'utilisation du dom :

Code:

1
2
3
MonText = document.createTextNode("Chuis la");  //Création du noeud text
MaDiv = document.getElementById("barre"); //récupération de la div
MaDiv.appendChild(MonText); //Ajout du text proprement dans la div ;)

17/02/2009, 10h57
jeremdu94

Bonjour,

Merci de vos réponses.

En fait ce que je voulais faire, ça n'a pas d'utilité car ce n'est pas un site qui ira sur la toile mais c'est un truc pour m'entrainer et ce que je voulais essayer c'était d'avoir mon div de préparé graphiquement avec rien dedans et au chargement qu'il y est marqué "Bonjour invité" et si on remplissait les champs d'un formulaire qui mettais la saisie dans des variables globales et qui une fois entré changeais le div pour : "Bonjour prenom nom".

Donc j'arrive bien à récupérer les infos du formulaire sauf que j'ai eu le problème du "is null" que j'ai compris, donc j'ai essayé avec un bouton et la j'arrive à afficher des choses mais les variables apparaissent en undefined et j'en étais à ce point.

Je pensais que ça serait plus simple et donc à mon niveau mais on dirait que non :/

Voilà :S Je répète ça n'a aucune utilité concrète, je voulais juste arriver à faire ça pour savoir faire ça mais j'ai un peu de mal on dirait :)

Merci infiniment de toute votre aide!
17/02/2009, 12h28
Auteur

tu peux nous montrer tes codes JS et HTML complets, pour t'aider à trouver la source du problème ?

Citation:

Envoyé par Auteur

tu peux nous montrer tes codes JS et HTML complets, pour t'aider à trouver la source du problème ?

Okay alors je débute hein... :S

Donc l'état actuel des choses:

Code:

1
2
3
4
5
6
 
<body>		
<div id="barre">
	Bonjour invité! <a href="javascript:saisie_nom()"> Cliquez ici pour vous connecter </a>
</div>
</body>

Code:

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
40
41
42
43
 
var  popup_saisie_nom, nom, prenom;
 
function saisie_nom()
{
 
	popup_saisie_nom=window.open("",'Nom','width=320,height=150,toolbar=no,left=800, top=100, scrollbars=no,resizable=no, directories=no, location=0');
	popup_saisie_nom.document.write("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
	popup_saisie_nom.document.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">");
	popup_saisie_nom.document.write("<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"fr\" lang=\"fr\">");
	popup_saisie_nom.document.write("<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /><title>Qui êtes vous?</title>");
	popup_saisie_nom.document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"styles/style_popup.css\"/>");
	popup_saisie_nom.document.write("<script type=\"text/javascript\" src=\"scripts/script.js\"></script></head>");
	popup_saisie_nom.document.write("<body>");
	popup_saisie_nom.document.write("Bonjour, <br/><br/>");
	popup_saisie_nom.document.write("<form method=\"post\" id=\"saisie_nom\">");	
	popup_saisie_nom.document.write("Saisissez votre nom: <input type=\"text\" id=\"nom\" /><br/>");
	popup_saisie_nom.document.write("Saisissez votre prénom: <input type=\"text\" id=\"prenom\" /><br/><br/>");
	popup_saisie_nom.document.write("<input type=\"submit\" value=\"OK !\" onclick=\"verif_nom()\">");
	popup_saisie_nom.document.write("</form></body></html>");	
 
}
 
function verif_nom()
{
	var erreur;
 
	erreur="";
	if(document.getElementById('saisie_nom').nom.value == "") erreur = erreur+"Veuillez saisir votre nom!\n"; 
	if(document.getElementById('saisie_nom').prenom.value == "") erreur = erreur+"Veuillez saisir votre prenom!\n";
	if(erreur != "") 
	{
		alert(erreur);
		window.close(popup_saisie_nom);
	}
	else 
	{
		nom = document.getElementById('saisie_nom').nom.value;
		prenom = document.getElementById('saisie_nom').prenom.value;
		window.close(popup_saisie_nom);
		document.getElementById('barre').innerHTML = ("Bonjour "+prenom+" "+nom+" !");
	}
}

Magnifique n'est ce pas? ^^ C'est moi qui l'est inventé, eh ouai!

Bref, le résultat est que lorsque je valide mon formulaire il me ferme ma popup et ne change pas mon div :/

Et donc l'erreur est :

Citation:

Erreur*: document.getElementById("barre") is null
Fichier Source*: file://*/script.js
Ligne*: 63

Ligne 63 qui est mon innerHTML

J'arrive à afficher avec pression d'un bouton dans mon div mais pas lorsque je vérifie le formulaire :(

C'est surement basique pour vous mais moi je sèche..

Dans le pire des cas si ce n'est pas possible j'abandonne hein c'est pas très important.

Merci beaucoup

Bon déjà, il faudra commencer par oublier document.write() :aie:

L'idéal est d'ouvrir une page HTML existante et de modifier son contenu si nécessaire avec des fonctions DOM. Cela t'évitera d'ouvrir une page blanche puis d'y ajouter du code avec document.write() ;)

Pour ce qui est du code :
dans ta pop-up tu as un bouton

Code:

<input type=\"submit\" value=\"OK !\" onclick=\"verif_nom()\">"

qui appelle la fonction verif_nom().
Et dans cette pop-up tu inclus un fichier JS.

Ce n'est pas parce que tu appelles le même script dans toutes tes pages HTML que les pages se partagent les variables et les fonctions. Loin de là !!
Donc verif_nom() n'est valable que dans ta pop-up ! Ton

Code:

document.getElementById('barre').innerHTML

fait référence à l'objet barre contenu dans ta pop-up pas dans ta page principale. Comme il n'existe pas, il y a une erreur.

Pour transmettre une valeur d'une pop-up à la page mère il faut faire référence à la page mère avec

Code:

window.opener

donc ton code devient pour la fonction verif_nom() (dans la partie else)
Code:

1 2 3 4 5 6 7 8 else { nom = document.getElementById('saisie_nom').nom.value; prenom = document.getElementById('saisie_nom').prenom.value; window.opener.document.getElementById('barre').innerHTML = ("Bonjour "+prenom+" "+nom+" !"); window.close(); }
et ferme la pop-up en dernier ;)

[Edit]
Par contre, j'ai un doute : la fonction close() prend un paramètre :koi: ? Je n'en suis pas sûr....
Là je l'ai supprimé.
[/Edit]

18/02/2009, 13h31
jeremdu94
Bonjour,

Citation:

Envoyé par Auteur

Bon déjà, il faudra commencer par oublier document.write() :aie:

L'idéal est d'ouvrir une page HTML existante et de modifier son contenu si nécessaire avec des fonctions DOM. Cela t'évitera d'ouvrir une page blanche puis d'y ajouter du code avec document.write() ;)

D'accord, je dois faire comme m'a expliqué "le chomeur" un peu plus haut?
Citation:
Envoyé par Auteur

Pour ce qui est du code :
dans ta pop-up tu as un bouton

Code:

<input type=\"submit\" value=\"OK !\" onclick=\"verif_nom()\">"

qui appelle la fonction verif_nom().
Et dans cette pop-up tu inclus un fichier JS.

Ce n'est pas parce que tu appelles le même script dans toutes tes pages HTML que les pages se partagent les variables et les fonctions. Loin de là !!
Donc verif_nom() n'est valable que dans ta pop-up ! Ton

Code:

document.getElementById('barre').innerHTML

fait référence à l'objet barre contenu dans ta pop-up pas dans ta page principale. Comme il n'existe pas, il y a une erreur.

Pour transmettre une valeur d'une pop-up à la page mère il faut faire référence à la page mère avec

Code:

window.opener

donc ton code devient pour la fonction verif_nom() (dans la partie else)

Code:

1 2 [...]

et ferme la pop-up en dernier ;)
D'accord j'ai compris mon erreur, je ne pensais pas qu'il fallait faire "communiquer" les pages avec window.opener.
J'ai googlisé cette propriété et si j'ai bien compris c'est pour agir sur la fenêtre qui a permis d'ouvrir une page (ici ma popup). C'est aussi ce que vous m'avez expliqué.
Je suis très content d'avoir appris ce petit détail car je sens qu'il va beaucoup me servir quand je ferais des choses un peu moins inutiles :)

Citation:

Envoyé par Auteur

[Edit]
Par contre, j'ai un doute : la fonction close() prend un paramètre :koi: ? Je n'en suis pas sûr....
Là je l'ai supprimé.
[/Edit]

Euh si c'est à moi que vous demandez ça je n'en ai aucune idée en tout cas elle fonctionne quand je met en paramètre ma variable de la popup, Après vous dire si c'est bien codé ou pas j'imagine que non puisque j'utilisais encore mon window.write ^^

Merci infiniment! Dire que c'était juste ce petit window.opener qui m'en a tant fait baver :)

Bonne journée

Citation:

Envoyé par jeremdu94

D'accord, je dois faire comme m'a expliqué "le chomeur" un peu plus haut?

exactement.

Tu ouvres une page HTML avec un minimum :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Qui êtes vous?</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="styles/style_popup.css"/> <script type="text/javascript" src="scripts/script.js"></script> </head> <body> </body> </html>
Puis avec le DOM tu ajoutes tout ce que tu veux entre tes balises body.

Citation:

Envoyé par jeremdu94

D'accord j'ai compris mon erreur, je ne pensais pas qu'il fallait faire "communiquer" les pages avec window.opener.
J'ai googlisé cette propriété et si j'ai bien compris c'est pour agir sur la fenêtre qui a permis d'ouvrir une page (ici ma popup). C'est aussi ce que vous m'avez expliqué.
Je suis très content d'avoir appris ce petit détail car je sens qu'il va beaucoup me servir quand je ferais des choses un peu moins inutiles :)

Juste un détail qui a son importance : tu ne peux faire passer des informations d'une fenêtre à une autre uniquement si elles sont sur le même domaine.

Pour window.close() je suis (presque) sûr qu'il ne faut pas de paramètre...

19/02/2009, 15h21
jeremdu94
Bonjour,
Citation:
Envoyé par Auteur

exactement.

Tu ouvres une page HTML avec un minimum :

Code:

1 2 [...]

Puis avec le DOM tu ajoutes tout ce que tu veux entre tes balises body.
Je viens de refaire mes popup avec cette méthode.
Je la préfère car ça fait moins de lignes dans mes scripts js :)
Puis je pense que c'est mieux de commencer à faire comme ca pour la suite.

Citation:

Envoyé par Auteur

Juste un détail qui a son importance : tu ne peux faire passer des informations d'une fenêtre à une autre uniquement si elles sont sur le même domaine.

C'est bien noté !

Citation:

Envoyé par Auteur

Pour window.close() je suis (presque) sûr qu'il ne faut pas de paramètre...

Je l'ai enlevé ! et je n'ai rien trouvé sur google où il y avait un paramètre donc je te crois.

Merci beaucoup de toute votre aide me voilà reparti sur de meilleures bases.

A bientôt sur le forum pour de nouveaux problèmes! ou pas..

Cdlt