mise à jour d'un doucument.write

Version imprimable

16/05/2006, 13h58
Mucsy

mise à jour d'un doucument.write
Bonjour à tous !

voilà, j'ai un champs texte (appelons le "text") qui est modifiable par l'utilisateur.

J'ai créé une fonction createLink() qui va permettre d'écrire un lien en html :
Code:

1 2 3 4 5 6 7 function createLink(value) { var text; text='<a href=mapage.php?VAR='; text+=value; text+='">cliquez ici</a>'; document.write(text); }
J'appelle finalement cette fonction dans une partie html grâce à cette ligne :

Code:

<script>createLink(document.getElementById("text").value);</script>

Le soucis c'est que la variable contenu dans le lien va prendre la valeur d'origine du champs texte alors que je souhaite qu'il soit modifié au fur et à mesure. La cause doit être à document.write qui écrit définitivement.

J'aimerai savoir si vous aviez une solution pour améliorer mon code ou bien, comme je suis conscient qu'il n'est pas génial, une idée pour exécuter ce que je veux faire . Merci !

Salut !

tu devrais plutôt créer ta balise a avec un attribut href vide (par exemple) et lui mettre un id, exemple :
Code:

1 2 3 4 5 6 7 <a href="" id="mon_lien">cliquez ici</a> <script type="text/javascript"> function createLink(value, ID) { document.getElementById('mon_lien').setAttribute('href', 'mapage.php?VAR=' + value); } </script>

16/05/2006, 14h06
Mucsy

ah oui ! merci, je vais tester ça !
16/05/2006, 14h14
Mucsy

La valeur ne se met pas à jour !

En fait pour plus d'explications, j'ai créer un slider qui va de 0 à 100 et en dessous j'ai créé ce champs texte qui affiche la valeur pointée par le slider.

Je comptais récupérer cette valeur et la mettre en variable du lien <a></a>.

Le lien prends la valeur d'origine que j'ai définie pour le slider
16/05/2006, 14h28
Swoög

il faudrait que tu appelles cette fonction par exemple dans le onchange de ton "champ texte"

Bon j'ai encore des problèmes à le faire marcher. Voilà ce que j'ai actuellement :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <a href="" id="mon_lien">cliquez ici ! </a> ... <script type="text/javascript"> function createLink(value) { document.getElementById('mon_lien').setAttribute('href', 'mapage.php?VAR=' + value); } </script> ... <input id="text" onChange="createLink(this.value);"/>
j'ai même testé de faire l'appel à createLink() dans du script après le <input text> mais sans résultat. Je n'obtiens que la valeur d'origine du text...

16/05/2006, 15h16
Swoög

qu'est-ce qui fait changer ton input text déjà ?
16/05/2006, 15h30
Mucsy

le input text récupère la valeur pointée par un slider. Il sert pour l'affichage mais également permet à l'utilisateur de rentrer une valeur.
16/05/2006, 17h43
Swoög

essaie de rajouter

Code:

onKeyUp="createLink(this.value);"

sur ton input...
16/05/2006, 17h56
Mucsy

ce que tu viens de me donner marche quand je tape une nouvelle valeur dans le champs texte et que j'appuie sur "entrée". C'est déjà une belle avancée ;)
mais le but reste de mettre à jour la variable du lien lorsque l'utilisateur bouge le slider... donc pas de touche "entrée" en jeu !

Mais peut-être que cette procédure est mauvaise et que je ne devrait pas raisonner comme ça !
16/05/2006, 18h05
Swoög

tu pourrais montrer le code du slider plz ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="slider" id="slider-1" tabIndex="1">
    <input class="slider-input" id="slider-input-1"/>
</div>
<p> champs texte : 
  <input id="size-value" onChange="s.setValue(parseInt(this.value))"/>
</p>
 
<script type="text/javascript">
    var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));s.setMaximum(30);
    s.onchange = function () 
    {
        document.getElementById("size-value").value = s.getValue();
    }
 
    s.setValue(2);
</script>

dans

Code:

1
2
3
4
    s.onchange = function () 
    {
        document.getElementById("size-value").value = s.getValue();
    }

:::

Code:

1
2
3
4
5
    s.onchange = function () 
    {
        document.getElementById("size-value").value = s.getValue();
        createLink(s.getValue());
    }