Lorsque j'essaie de récupérer du texte qui a été saisi dans un formulaire, le résultat est vide.

document.getElementById("pass").addEventListener("keydown", function() {
  document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
  document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});
var pass = document.getElementById("pass").value;
var pinCode = document.getElementById("pinCode").value;

function createCookie() {
  window.alert(pass);
}
<div id="validation">
  <form id="validationForm">
    <fieldset>
      <label for="pass">Password:</label><br />
      <input type="text" id="pass" name="pass" /><br />
      <label for="pinCode">4-digit PIN:</label><br />
      <input type="text" id="pinCode" name="pinCode" /><br />
      <input type="submit" value="Log In" onclick="createCookie()" />
      <p id="rightorwrong"></p>
    </fieldset>
  </form>
</div>
<script type="text/javascript" src="password.js"></script>

Lorsque l'utilisateur entre des données dans le formulaire et appuie sur Soumettre, la fonction createCookie() est appelée. Je sais que cela fonctionne parce que si je mets window.alert("test"); dans la fonction, cela fonctionne. Par conséquent, le problème est dans le pass.

J'ai essayé de supprimer le value de var pass = document.getElementById("pass").value;, mais cela n'a pas fonctionné non plus.

Pour plus de précision, voici ce qui apparaît lorsque j'appuie sur envoyer sur le formulaire: enter  description de l'image ici

Je suis perplexe, car il s'agit également d'un code relativement simple. (Je suis sur Chrome 84.)

TIA

1
FruDe 24 août 2020 à 16:23

4 réponses

Meilleure réponse

Vous devez utiliser la valeur dans la fonction comme ça:

document.getElementById("pass").addEventListener("keydown", function() {
    document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
    document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});


function createCookie() {
   var pass = document.getElementById("pass").value;
   var pinCode = document.getElementById("pinCode").value;
    window.alert(pass); 
      window.alert(pinCode); 
}
<div id = "validation">
    <form id = "validationForm">
        <fieldset>
            <label for = "pass">Password:</label><br  />
            <input type = "text" id = "pass" name = "pass"  /><br  />
            <label for = "pinCode">4-digit PIN:</label><br  />
            <input type = "text" id = "pinCode" name = "pinCode"  /><br  />
            <input type = "submit" value="Log In" onclick = "createCookie()"  />
            <p id = "rightorwrong"></p>
        </fieldset>
    </form>
</div>
<script type = "text/javascript" src = "password.js"></script>
1
Simone Rossaini 24 août 2020 à 13:27

Mettez votre variable dans la fonction. Comme initialement lors du chargement de la page, leurs valeurs seront nulles et vous ne leur réaffecterez pas de valeurs.

Par conséquent, modifiez leurs valeurs sur keydown ou définissez leurs valeurs sur click.

function createCookie() {
  var pass = document.getElementById("pass").value;
  var pinCode = document.getElementById("pinCode").value;
  window.alert(pass);
}

Vérifiez l'extrait.

document.getElementById("pass").addEventListener("keydown", function() {
  document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
  document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});

function createCookie() {
  var pass = document.getElementById("pass").value;
  var pinCode = document.getElementById("pinCode").value;
  window.alert(pass);
}
<div id="validation">
  <form id="validationForm">
    <fieldset>
      <label for="pass">Password:</label><br />
      <input type="text" id="pass" name="pass" /><br />
      <label for="pinCode">4-digit PIN:</label><br />
      <input type="text" id="pinCode" name="pinCode" /><br />
      <input type="submit" value="Log In" onclick="createCookie()" />
      <p id="rightorwrong"></p>
    </fieldset>
  </form>
</div>
<script type="text/javascript" src="password.js"></script>
0
Ajeet Eppakayala 24 août 2020 à 13:43

Le code javascript devrait être comme ça

document.getElementById("pass").addEventListener("keydown", function () {
    document.getElementById("pass").style.backgroundColor = "#DFFEFE";

});
document.getElementById("pinCode").addEventListener("keydown", function () {
    document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});


function createCookie() {
    var pass = document.getElementById("pass").value;
    var pinCode = document.getElementById("pinCode").value;
    alert(pass)
}
0
DevMahdi 24 août 2020 à 13:34

Vous devriez obtenir de la valeur lorsque vous soumettez, pas lorsque le fichier js est chargé. Vous pouvez également écouter avec la fonction onchange

var pass;
function createCookie() {
  pass = document.getElementById("pass").value;
  window.alert(pass); 
}
0
Cristian Razvan Gavrila 24 août 2020 à 13:29