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

Super Maxou
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

Amilor7
Réponse acceptée

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 !

Lartak

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

Super Maxou
Auteur

Bonsoir ! :p

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

Lartak

Regardes ici.

saibe

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
Auteur

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

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
Auteur

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

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
Auteur

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

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
Auteur

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

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
Auteur

Yop,

Nope, ça ne fonctionne toujours pas. :[

Amilor7

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
Auteur

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 = '';
  }

}
Super Maxou
Auteur

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

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