CODEWITHSUNDEEP
javascript
ret
ret

Reputation: 239

Javascript | Pressing the enter button on the keyboard, the HTML button should be pressed

Pressing the enter button on the keyboard, the HTML button (id="botonCorregir") should be pressed automatically, but does nothing.

HTML:

<form id="theFormID" class="text-center">
    <input autofocus id="respuestaUsuario" type="text">

    <button id="botonCorregir" onclick="corregir()">Responder</button>
</form>

JAVASCRIPT:

<script>
  //This should push the html button
  var input = document.getElementById("respuestaUsuario"); 
  input.addEventListener("keyup", function(event) {

    if (event.keyCode == 13) {
     event.preventDefault();
     document.getElementById("botonCorregir").click();
    }
  });
</script>

<script>
  //This corrects the user answer
  function corregir(){        
      var respUs = document.getElementById('respuestaUsuario').value;
      var respUs=respUs.toLowerCase();
      var respuestasDj = document.getElementsByClassName("idRespuesta");
      var cantidad = respuestasDj.length;
      var resultado = "incorrecto";
      for(i = 0; i < cantidad; i++){
        var respPosible = document.getElementsByClassName("idRespuesta")[i].getAttribute('value');
          if(respUs == respPosible){
              var resultado = "correcto";
          }   
      }
  }
</script>

For example if y try that, and push enter, doesn´t show alert "hello!". Why?

<script>
  if (event.keyCode == 13) {
    alert("hello!");
}
</script>

Upvotes: 0

Views: 59

Answers (3)

Rudy Quinternet
Rudy Quinternet

Reputation: 39

the keyup event listener is for when you release the enter key plus you can call the corregir function directly instead of triggering a click on the button

try :

<script>
  //This should push the html button
  var input = document.getElementById("respuestaUsuario"); 
  input.addEventListener("keyup", function(event) {

    if (event.keyCode == 13) {
     event.preventDefault();
     corregir();
    }
  });

  //This corrects the user answer
  function corregir(){        
      var respUs = document.getElementById('respuestaUsuario').value;
      var respUs=respUs.toLowerCase();
      var respuestasDj = document.getElementsByClassName("idRespuesta");
      var cantidad = respuestasDj.length;
      var resultado = "incorrecto";
      for(i = 0; i < cantidad; i++){
        var respPosible = document.getElementsByClassName("idRespuesta")[i].getAttribute('value');
          if(respUs == respPosible){
              var resultado = "correcto";
          }   
      }
  }
</script>

also, a submit would be more addapted to this situation since the submit triggers itself on enter if an element of it's form is selected

Upvotes: 1

Matze
Matze

Reputation: 114

Try to call the function direktly without clicking the button.

if (event.keyCode == 13) {
 event.preventDefault();
 corregir();
}

Upvotes: 0

Raffaele
Raffaele

Reputation: 767

The usual way to do it in html/js is this one:

HTML

<form id="my-form">
   <!-- creating a form, we use the on-submit event -->
   <input type="text" autofocus id="respuestaUsuario" />
   <button type="submit">Responder</button>
</form>

JS

// submit event runs when the user click the submit button or press enter on the input-text 
document.getElementById('my-form').addEventListner('submit', evt => {
    evt.preventDefault();
    corregir();
});

Let me know if it's not clear enough and I'll try to explain it better.

Upvotes: 1

Related Questions