Forum « Re: passage de paramètres et affichage »

Forum « Programmation Javascript » (archives)

Re: passage de paramètres et affichage

Envoyé: 8 octobre 2003, 14h26 par Oznog

Salut,

C'Est bien beau de changer la valeur de la variable "titre". D'ailleurs tu y arrive très bien, mais pour l'afficher en temps réel c'est une autre histoire. Si la valeur était calculé pendant le chargement de la page, le simple fait de retrouver plus bas (plus bas dans le code) le "document.write" suffit à afficher la variable. Et c'Est effectivement ce qui se passe. Mais la variable "titre" ne vaut rien à ce moment, raison pour laquelle rien n'est affiché.

Il te faut donc trouver une façon de modifier le contenu du document en temps réel. Il esxiste deux façon, la plus vielle en HTML en utilisant les éléments dynamic d'une page, comme un formulaire, ou encore certaine propriété du document comme la barre de statut (status bar).

Par exemple pour un formulaire et un élément "test".

document.monForm.monTexte.value = titre;

Ou encore en Javascript et la structure DOM. PAr exemple si j'ai un élément DIV avec l'ID "titre". Je peux y accéder, le cibler de cette façon : document.getElementById("titre"). Il suffit allors de changer son contenu avec la propriété "innerHTML".

document.getElementById("titre").innerHTML = titre;

Voiçi un exemple complet avec les deux méthodes en simultané... Note que j'ai mis en sourdine ton fond musical ;-)

<head>
<script language="javascript">
var titre;
function zik(a) {
if(a==0) titre="Vous ecoutez Don't call me";
if(a==1) titre="Vous ecoutez Dying peace";
if(a==2) titre="Vous ecoutez Snakes";
document.getElementById("titre").innerHTML = titre;
// OU
document.monForm.monTexte.value = titre;
}

function music(n) {
//fond_musical.innerHTML=son[n];
zik(n);
}
//-->
</script>
<style>
#titre {
font-size : 12px;
font-weight : bold;
font-family : arial, helvetica, sans-serif;
color : #fff;
background-color : #71819D;
border: 1px solid #314152;
width: 250px;
padding : 5px;
margin : 5px;
FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=120,color=gray,strength=4);
}
</style>
</head>

<body>
<p><a href="javascript:music(0)">snakeDon't call me</a> - <a href="javascript:music(1)">Dying peace</a> - <a href="javascript:music(2)">snake</a></p>
<div id="titre">en DHTML</div>

- OU -

<form name="monForm">
<input type="texte" name="monTexte" value="en HTML">
</form>

</body>

Ciao
Oznog