probléme avec le DOM

Sujet résolu

10 octobre 2006 à 18:18:04

bonjour à tous,

j'ai lu le tuto DHTML et javascript, et je voudrais maitriser ce language. C'est pourquoi je travail sur les exemples a la fin du tuto, mais j'avoue que j'ai quelques difficultés.

Ce que je voudrais c'est que lorsque je passe la souris sur le lien english une liste apparaisse avec la première ligne de la liste qui soit un lien.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<title>Page de test</title>

<script type="text/javascript" src="test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" lang="fr" content="Bastien Moyet" />
<link rel="stylesheet" media="screen" type="text/css" title="Classic" href="style.css" />

</head>

<body>
<p id="testbox">If you see an image appearing in the current box when your mouse is over the link below javascript is enabled on your computer</p>
<p class="javascript"><a href="test.html" onmouseover="javascript:flag(1)" >Engish</a> <a href="test.html" onmouseover="javascript:flag(2)" >Français</a></p>

</body>

</html>

Quand je passe ma souris sur french tous marche bien, mais quand je passe ma souris sur english tous s'efface et après le script ne marche plus.

Tudor-QVD

10 octobre 2006 à 19:52:45

Ligne 13: tu as oublié un e à "texte2":

lien.appendChild(texte1 /*au lieu de text1*/);//on lie le texte et le lien

Sinon, je ne sais pas exactemenent ce que tu veux faire mais tu pourrais gagner en simplicité en ne créant pas les menus <ul> à chaque fois mais juste en les affichant masquant avec une propriété css(display='hidden' ou 'block').

NicolasFD

10 octobre 2006 à 20:08:28

merci beaucoup,

Citation : Boo2M0rs0

Sinon, je ne sais pas exactemenent ce que tu veux faire mais tu pourrais gagner en simplicité en ne créant pas les menus <ul> à chaque fois mais juste en les affichant masquant avec une propriété css(display='hidden' ou 'block').

En fait je ne fait rien de précis, j'essaye des choses pour apprendre à me servir de ce language qui a l'air de permettre de faire pas mal de chose.

d'ailleur j'aurais une autre question j'ai essyé de mettre une boucle mais mon script ne marche pas, est ce que quelqu'un aurit une idée.

if( type == 1 ){//si la variable reçu vaut 1
//Suppression de l'ancien contenu
var paragraphe = document.getElementById("testbox");
var old_contenu = paragraphe.firstChild;
paragraphe.removeChild(old_contenu);
//Ajout du nouveau contenu
var ul = document.createElement("ul");//on créé une balise ul

for(var i=1; i<4 ; i++){
var li[i] = document.createElement("li");
var lien = document.createElement("a");//on créé une balise a
lien.setAttribute("href","index.html");//on ajoute l'attribut href
var texte[i] = document.createTextNode("sousmenu"+i);
lien.appendChild(texte[i]);//on lie le texte et le lien
li[i].appendChild(lien);//on lie le lien et la balise li
ul.appendChild(li[i]);}

}

Tudor-QVD

11 octobre 2006 à 13:12:06

Tu ne peux pas créer de variable qui est une case de tableau.

Soit tu fais:

var li = []; //Tableau vide
//Une fois dans ta boucle, tu fais:
li[i] = document.createElement('li'); //Etc..

Soit tu laisse tomber les tableaux dans ta boucle (de la même façon que pour la variable lien).

NicolasFD

11 octobre 2006 à 14:03:16

j'ai essayé de faire ce que tu m'as dis, en laissant tomber les tableuax mais je n'ai pas réussi à faire fonctionner le script:

f( type == 1 ){//si la variable reçu vaut 1
//Suppression de l'ancien contenu
var paragraphe = document.getElementById("testbox");
var old_contenu = paragraphe.firstChild;
paragraphe.removeChild(old_contenu);
//Ajout du nouveau contenu
var ul = document.createElement("ul");//on créé une balise ul
var li = document.createElement("li");
var lien = document.createElement("a");//on créé une balise a
lien.setAttribute("href","index.html");//on ajoute l'attribut href
for(var i=1; i<4 ; i++){
var texte = document.createTextNode("sousmenu"+i);
lien.appendChild(texte);//on lie le texte et le lien
li.appendChild(lien);//on lie le lien et la balise li
ul.appendChild(li);}
pargraphe.appendChild(ul);
}

Tudor-QVD

11 octobre 2006 à 19:57:01

Tu devrais pas plutôt faire:

var paragraphe = document.getElementById("testbox");
var old_contenu = paragraphe.firstChild;
paragraphe.removeChild(old_contenu);
//Ajout du nouveau contenu
var ul = document.createElement("ul");//on créé une balise ul
for(var i=1; i<4 ; i++){

var li = document.createElement("li");
var lien = document.createElement("a");//on créé une balise a
lien.setAttribute("href","index.html");//on ajoute l'attribut href
var texte = document.createTextNode("sousmenu"+i);
lien.appendChild(texte);//on lie le texte et le lien
li.appendChild(lien);//on lie le lien et la balise li
ul.appendChild(li);
}
paragraphe.appendChild(ul);

var li et lien à l'intérieur de la boucle car tu crée un lien différent pour chaque ligne (donc pour chaque li aussi).
et puis tu as fait une faute à "pargraphe" (paragraphe)

NicolasFD

12 octobre 2006 à 16:57:50

merci pour tes conseils.

je vais essayer de lire plus attentivement les tutos pour pouvoir me débrouiller tous seul.