Afficher un texte selon un autre texte saisi dans un input

Bonjour,

Je débute en javascript, j'aurais besoin de vos lumières.

Mon code :

<p>YES=Y NO=N</p>
<form type="text" name="FORM1">
        <input id="learnstuff" onkeypress="update_val()" name="learnstuff">
</form>
<span id="answer"></span>

 var learnstuff = document.getElementById("learnstuff").value;
            function yesno() {
                if(learnstuff == "Y") 
                  document.getElementById("answer").value = "<p>OK LET'S CONTINUE !</p>";
                else if(learnstuff == "N") 
                  document.getElementById("answer").value = "<p>REALY ?</p>";
                else
                  document.getElementById("answer").value = "<p>HODOR !</p>";
            }

L'objectif est que lorsque l'utilisateur saisi "Y" dans l'input, le texte "OK LET'S CONTINUE !" s'affiche en dessous. Si il saisi "N", le texte "REALY ?" s'affiche, etc. À la manière de l'invité de commande Windows ou du terminal OS X.

Quelles sont les erreurs dans mon code ?

Merci beaucoup !

Bonjour !

Alors déjà, pas de Jquery tu as toute mon estime la plus profonde. Change rien.

Au niveau du code t'y est quasiment. Il te manque juste le fait d'attacher un event listner (http://www.w3schools.com/jsref/met_element_addeventlistener.asp) a ton input (plutot que le onkeypress dans l'input) pour détecter le changement de réponse. Et dès que tu détecte ce changement hop tu récupère la value du input et tu set l'answer.

Quelques remarques cependant concernant l'affichage de la réponse

<span id="answer"></span>

document.getElementById("answer").value = "<p>OK LET'S CONTINUE !</p>";

Tu met un p dans un span : tu as un conteneur inutile (et en plus sémantiquement je ne sais pas si c'est très correct). Met le p directement dans le html et set juste le texte.
Et pour mettre du texte, utilise element.innerHTML pour remplacer tout le contenu de l'élément:

<p id="answer"></p>

document.getElementById("answer").innerHTML = "OK LET'S CONTINUE !";

Et une dernière remarque, au début de ton code tu peux mettre les éléments dans des variables pour ne pas à avoir a faire un getElementById à chaque fois.
Ex :

var learnstuff = document.getElementById("learnstuff");
var answer = document.getElementById("answer");
            function yesno() {
                if(learnstuff.value == "Y") 
                  answer.innerHTML = "OK LET'S CONTINUE !";
                else if(learnstuff.value == "N") 
                  answer.innerHTML = "REALY ?";
                else
                  answer.innerHTML = "HODOR !";
            }

Je t'ai pas mis l'event listner pour que tu le découvre tout seul et que tu t'amuse un peu

Bon code
Modifié par _laurent (17 Apr 2015 - 11:06)

Bonjour et merci pour ta réponse !

J'ai essayé en suivant tes conseils...

<form type="text" name="FORM1">
      <input id="learnstuff" name="learnstuff">
</form>
<p id="answer"></p>

var learnstuff = document.getElementById("learnstuff");
var answer = document.getElementById("answer");
learnstuff.addEventListener("keypress", yesno);
            
function yesno() {
      if(learnstuff.value == "Y") 
            answer.innerHTML = "OK LET'S CONTINUE !";
      else if(learnstuff.value == "N") 
            answer.innerHTML = "REALY ?";
      else
            answer.innerHTML = "HODOR !";
}

...mais ça ne marche pas

J'ai manqué quelque chose ? Mon utilisation de addEventListener est bonne ?

Merci msieur

Re,

T'y est presque !
Ton code marche bien c'est juste l’événement que tu as mal choisi.
Ici plutot qu'un "keypress" il faudrait choisir un "input". La liste des event : http://www.w3schools.com/jsref/dom_obj_event.asp

Demo avec ton code : http://jsfiddle.net/Undless/xskd7mjy/

Hop et au passage, dans ton html :

<form type="text">
        <input id="learnstuff" name="learnstuff" />
</form>

Le type="text" s'applique a un input (selon si tu veux un champs de texte, un nombre, un texte long etc...) et non au form :

<form>
        <input id="learnstuff" name="learnstuff" type="text" />
</form>

http://www.w3schools.com/tags/tag_form.asp

Beau boulot
Modifié par _laurent (17 Apr 2015 - 13:10)