Changer contenu <textarea> en fonction d'un <select>

Par Super Maxou, il y a 9 ans

Javascript

Bonjour,

J'ai un problème, (mince alors !) je voudrais changer le texte d'un textarea en fonction de ce qu'a sélectionné l'utilisateur grâce à une balise select.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="JS/epreuve3.js"></script> <title>La semaine des Mathématiques</title> </head> <header> <center><h1> Retrouver le mot de passe. </h1></center> </header> <body onload = "choixmail()"> <center> <p class="texte">Votre ami est partit sans vous prévenir, et il à laisser ses clefs de maison, vous ne pouvez pas l'appeller au téléphone puisqu'il à changé recemment de numéro et qu'il ne vous l'a pas encore transmit. De plus, il a laissé son ordinateur allumé avec sa boite mail. Retrouvez son numéro et appellez le pour le prévenir. </p> </center> <p> <select id="Mails"> <option value="0">Choisissez un mail..</option> <option value="1">Okéa - Votre livraison est en cours d'acheminement !</option> <option value="2">Fakebook - Vous avez un message de Jean Paindemie.</option> <option value="3">EasyCandy - 50% de réduction sur vos produits favoris !</option> <option value="4">Stim - Un article de votre liste de souhaits est en soldes.</option> </select> <p> <TEXTAREA readonly id = "mail" rows=10 COLS=40></TEXTAREA> </p> </p> <p id="indice"></p> <p id="verdict"></p> <a href="menu.html"/><img id = "continuer" style="display:none" src="CSS/images/avantgout/boutoncontinuer.png"/></a> </body> </html>

Et voiçi le code du .js :

function choixmail(){ var choix = document.getElementById("Mails").options[document.getElementById("Mails").selectedIndex].value; var x = "TEST"; if(choix == 1) { document.getElementById("mail").value = x; } }

En effet, si je selectionne l'option Okéa, (donc value = 1), le mot TEST devrait apparaitre dans le textarea, or rien ne se passe, j'ai essayé pas mal de conseils sur OCC, mais rien n'y fait ! Je me reporte donc à vous !
Merci d'avance ! :p

18 réponses

Lartak, il y a 9 ans

Bonjour.
Est-ce que tu as tout simplement essayé d'utiliser textContent à la place de value ?

Super Maxou, il y a 9 ans

Bonsoir ! :p

Je viens d'essayer de changer le .value par un .textContent, mais nada.. :/

Lartak, il y a 9 ans

Regardes ici.

saibe, il y a 9 ans

hello,
avant toute chose il faudrait penser à mettre un écouteur sur ton select... car appeler ta fonction au onload ne sert pas à grand chose... ici tu vas toujours récupérer 0 ;)
secondo, pour récupérer la valeur d'un select c var choix = document.getElementById("Mails").value ou var choix = document.querySelector("#Mails").value tout simplement

Super Maxou, il y a 9 ans

Bonjour !

saibe : Je comprends ce que tu veux dire, mais je n'arrive pas à mettre celà en place, voilà ce que j'ai ajouté au .js :

document.getElementById("Mails").addEventListener("onchange", choixmail); function choixmail(){ var choix = document.getElementById("Mails").value; var x = "TEST"; if(choix == 1) { document.getElementById("mail").textContent = x; } }

Et voilà ce que j'ai ajouté au select :

<select id="Mails" onChange ="choixmail()"> <option value="0">Choisissez un mail..</option> <option value="1">Okéa - Votre livraison est en cours d'acheminement !</option> <option value="2">Fakebook - Vous avez un message de Jean Paindemie.</option> <option value="3">EasyCandy - 50% de réduction sur vos produits favoris !</option> <option value="4">Stim - Un article de votre liste de souhaits est en soldes.</option> </select>

N'ayant jamais fait d'eventlistener avant, je ne sais pas vraiment quoi écrire en type...

Lartak : Je ne comprends pas vraiment le code que tu m'as envoyé ^^ Pourrais-tu m'éclairer ? :p

Cordialement,

Thomas Chicheportiche, il y a 9 ans

Salut,
Tu as essayer de passer ton event en change au lieu de onchange?
De plus, évites de déclarer un onchange sur ton select + un event sur le change en js

Super Maxou, il y a 9 ans

Salut !

Je viens d'enlever le onchange du select, et de changer le onChange en change en js, mais toujours rien... Ce que je souhaite faire est impossible ?

saibe, il y a 9 ans

hello,
on va y aller doucement ;) as tu :
modifier <body onload = "choixmail()"> en <body> ?
modifier <select id="Mails" onChange ="choixmail()"> en <select id="Mails"> ?
placer ton script après ton body ? sinon ça ne pourra pas fonctionner...
et enfin document.getElementById("Mails").addEventListener("onchange", choixmail); en document.querySelector('#Mails').addEventListener('change', choixmail) ?

Super Maxou, il y a 9 ans

Yop !

modifier body onload = "choixmail()" en body => Oui.
modifier select id="Mails" onChange ="choixmail()" en select id="Mails" => Oui.
placer ton script après ton body ? sinon ça ne pourra pas fonctionner... => J'ai lié ma page à mon fichier .js. (j'ai quand même essayé de le mettre après le body = rien.)
et enfin document.getElementById("Mails").addEventListener("onchange", choixmail); en document.querySelector('#Mails').addEventListener('change', choixmail) => Oui.

J'ai fait TOUT ce que vous m'avez proposé, mais rien n'y fait.

Amilor7, il y a 9 ans

Salut, demande moi si tu ne comprends pas, ou si quelque chose ne fonctionne pas !
https://jsfiddle.net/d3L65p2L/
Bonne soirée !
PS: Je te conseil de suivre la formation de Grafikart sur le JS pour apprendre à gérer les évennéments avec notamment 'addEventListener' ;)

Super Maxou, il y a 9 ans

Bonsoir !

Sur le lien que tu m'as envoyé, tout fonctionne parfaitement, c'est exactement ça que je voulais faire. Mais quand je met ton code dans le mien, ça ne fonctionne pas... -_-"

Amilor7, il y a 9 ans

Alors, j'ai un peu modifié le code Javascript mais aussi le code HTML, vérifie que les selecteurs colle avec ton code HTML,
J'ai changé l'ID du <select>

var choice = document.querySelector('#mails'); // au lieu de #Mails

Dis-moi si cela marche

Super Maxou, il y a 9 ans

Yop,

Nope, ça ne fonctionne toujours pas. :[

Amilor7, il y a 9 ans

Alors là je t'avoue que je sèche un peu, à la rigueur si tu peux à nouveau copier ton code HTML et JS ?
Car normalement le JS fonctionne bien, tu dois avoir une erreur dans ta console non ?

Super Maxou, il y a 9 ans

Bonsoir !

Alors.. j'ai déplacé la balise <script> JUSTE AVANT le </body> et...
CA FONCTIONNE ENFIN !
J'arrive pas à croire que le problème était aussi bidon... '-' Quoi qu'il en soit je te remercie beaucoup ! (les autres aussi bien entendu :p) et désolé d'avoir été aussi embêtant ! ^^

Bonne soirée à tous !

Amilor7, il y a 9 ans

De rien, t'en fais pas ça arrive souvent les erreurs bidons ^^, bonne soirée !

Super Maxou, il y a 9 ans

Hello,

Désolé pour ma réponse tardive, voiçi les codes :

HTML :

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="JS/epreuve3.js"></script> <title>La semaine des Mathématiques</title> </head> <header> <center><h1> Retrouver le mot de passe. </h1></center> </header> <center> <p class="texte">Votre ami est partit sans vous prévenir, et il à laisser ses clefs de maison, vous ne pouvez pas l'appeller au téléphone puisqu'il à changé recemment de numéro et qu'il ne vous l'a pas encore transmit. De plus, il a laissé son ordinateur allumé avec sa boite mail. Retrouvez son numéro et appellez le pour le prévenir. </p> </center> <p> <select id="Mails"> <option value="0">Choisissez un mail..</option> <option value="1">Okéa - Votre livraison est en cours d'acheminement !</option> <option value="2">Fakebook - Vous avez un message de Jean Paindemie.</option> <option value="3">EasyCandy - 50% de réduction sur vos produits favoris !</option> <option value="4">Stim - Un article de votre liste de souhaits est en soldes.</option> </select> <p> <TEXTAREA readonly id = "mail" rows=10 COLS=40></TEXTAREA> </p> </p> <p id="indice"></p> <p id="verdict"></p> <a href="menu.html"/><img id = "continuer" style="display:none" src="CSS/images/avantgout/boutoncontinuer.png"/></a> </body> </html>

JS :

var choice = document.querySelector('#Mails'); // On écoute l'événement 'change', et non 'onchange' qui est utilisé dans l'HTML // Chaque fois que la valeur change on appel la fonction choixmail(); choice.addEventListener('change', function(){ choixmail(); }) function choixmail(){ // Log de la value du select console.log(choice.value); var x = 'test'; // Selection du textarea var textarea = document.querySelector('#mail'); // Si la valeur du select est égale à 1 alors... // Renseignes toi sur parseInt si tu ne sais pas déjà ce que c'est if(parseInt(choice.value) === 1){ textarea.value = x; }else{ // Sinon textarea vide, ou ce que tu souhaites... textarea.value = ''; } }
Amilor7, il y a 9 ans

J'ai collé l'HTML et le JS sans rien modifié et ça fonctionne. https://jsbin.com/lepehotiwa

Bon à mon avis le problème vient de la façon dont tu charge le fichier js. Déjà mets la balise <script type="text/javascript" src="JS/epreuve3.js"></script> (c'est bien le fichier où il y a le code ?) avant la fermeture de ton </body> ensuite vérifie le chemin vers le fichier, le dossier 'JS' (que d'ailleurs tu devrai renommer en miniscule) puis le fichier epreuve3.js. Il faut que ça fasse

  • index.html
  • JS (dossier)
    • epreuve3.js

Bref en tout cas le problème vient de là, bonne soirée !