0

Necesito comparar dos inputs al presionar la tecla enter, en los que primero introduzco un número de referencia, y en el segundo siempre voy a introducir el mismo numero relacionado con esa referencia, puede ser de 1 a 3000 comprobaciones. Y lo que debería hacer el programa es borrar el segundo input cada vez que hago enter y mostrar el fondo en verde si es correcto o rojo si es incorrecto.

El problema lo tengo a la hora de borrar el campo del segundo input porque siempre me muestra rojo.

No se si es un problema de como estoy intentando restablecer el valor del segundo input, o es que debería hacerlo de otra manera. Os agradezco cualquier ayuda.

Adjunto código.

function comparar() {
  $("#2").on('keydown', function(e) {
    let first = document.getElementById('1').value;
    let second = document.getElementById('2').value;
    let correcto;
    var keycode = e.keyCode || e.which;
    if (keycode == 13) {
      //document.getElementById('2').value = '';
      console.log(second)
      if (first == 4 && second == 4) {
        document.getElementById('menu_body').style.background = 'lightgreen';
        document.getElementById('correcto').style.display = "block";
        document.getElementById('incorrecto').style.display = "none";
      } else {
        document.getElementById('menu_body').style.background = 'red';
        document.getElementById('correcto').style.display = "none";
        document.getElementById('incorrecto').style.display = "block ";
      }
      document.getElementById('2').value = '';
    }
  });
}
<div style="text-align: center">
  <h2>Lectura Etiquetas DMC</h2>
  <form action="#">
    <input id="1" maxlength="3" placeholder="Orden de producción" type="text" />
    <input id="2" type="text" maxlength="9" size="30" onkeydown="comparar()" placeholder="Lectura Pieza DMC" />
    <!--<input id="3" type="text" placeholder="Lectura Referencia AC" onkeyup="comparar()"/>--><br>
    <button type="button" onclick="alert('Hello world!')">Click Me!</button>
  </form>
</div>
<div id="correcto" style="text-align: center; font-size: 35px; display: none; margin-bottom: 50px">
  <br>
  <h1>LECTURA CORRECTA! </h1>
</div>
<div id="incorrecto" style="text-align: center; font-size: 35px; display: none; margin-bottom: 50px">
  <br>
  <h1>LECTURA INCORRECTA! </h1>
</div>

1
  • Ya que tu código es HTML + JS, podés editar tu pregunta y agregar un snippet (con el botón que indica <>) para poder reproducir tu problema en la pregunta misma.
    – padaleiana
    el 19 ene. 2022 a las 12:48

1 respuesta 1

1

Aunque esto esté dentro de la función comparar():

$("#2").on('keydown', function (e) {

segun parece a jquery le da igual, y siempre está a la escucha, por lo tanto yo haria dos cosas para solucionarlo.

  1. Quitar la linea de definición de función comparar(). Es decir, borrar esta línea:
function comparar(){

y su cierre } al final del javascript tambien.

  1. Borrar la llamada a dicha función en el id 2. Es decir, cambiar esto:
<input id="2" type="text" maxlength="9" size="30" onkeydown="comparar()" placeholder="Lectura Pieza DMC"/>

por esto

<input id="2" type="text" maxlength="9" size="30" placeholder="Lectura Pieza DMC"/>

pues siempre está a la escucha gracias al jquery comentado al principio.

  1. Luego, si lo que quieres es comparar ambos valores, debes cambiar esto:
if (first == 4 && second == 4 ) {

por esto:

if (first == second) {

Si quieres hacerlo en vanilla javascript (puro) quita la linea de jquery y agrega estas dos:

campo2 = document.getElementById('2');
campo2.addEventListener('keydown', function(e) {
//$("#2").on('keydown', function(e) {

Y te quedará una cosa así (ejecuta el snippet siguiente):

campo2 = document.getElementById('2');
campo2.addEventListener('keydown', function(e) {
//$("#2").on('keydown', function(e) {
  let first = document.getElementById('1').value;
  let second = document.getElementById('2').value;
  let correcto;
  var keycode = e.keyCode || e.which;
  if (keycode == 13) {
    if (first == second) {
      document.getElementById('menu_body').style.background = 'lightgreen';
      document.getElementById('correcto').style.display = "block";
      document.getElementById('incorrecto').style.display = "none";
    } else {
      document.getElementById('menu_body').style.background = 'red';
      document.getElementById('correcto').style.display = "none";
      document.getElementById('incorrecto').style.display = "block ";
    }
    document.getElementById('2').value = '';
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu_body">
  <div style="text-align: center">
    <h2>Lectura Etiquetas DMC</h2>
    <form action="#">
      <input id="1" maxlength="3" placeholder="Orden de producción" type="text" />
      <input id="2" type="text" maxlength="9" size="30" onkeydown="" placeholder="Lectura Pieza DMC" />
    </form>
  </div>
  <div id="correcto" style="text-align: center; font-size: 35px; display: none; margin-bottom: 50px">
    <br>
    <h1>LECTURA CORRECTA! </h1>
  </div>
  <div id="incorrecto" style="text-align: center; font-size: 35px; display: none; margin-bottom: 50px">
    <br>
    <h1>LECTURA INCORRECTA! </h1>
  </div>
</div>

16
  • Esta es una opción que ya habia probado y de hecho no entiendo porque en mi web no esta funcionando, es como si no me detectara el evento si quito la funcion comparar. He copiado y pegado tu codigo por si era error mio. Pero no me sale ni un solo error en consola, no se ejecuta el codigo. el 19 ene. 2022 a las 14:32
  • Se supone que usas jquery tambien... que version usas tu? ¿Has copiado tanto el html como el js? Copia ambos, deberia funcionar.
    – masterguru
    el 19 ene. 2022 a las 14:37
  • La web en la que estoy trabajando creo que es la 1.10.2, es antigua. Utilizo jquery, porque no encontre como hacer esa funcion en javascript puro. Probablemente sea ese el problema, sabrias hacer esa funcion con javascript? el 19 ene. 2022 a las 14:40
  • Por cierto, solo funciona cuando le das a la tecla ENTER en el segundo campo, tal como lo tenias diseñado... ¿eso lo tienes en cuenta?
    – masterguru
    el 19 ene. 2022 a las 14:40
  • Si, lo tengo en cuenta, lo has hecho tal y como comento en mi problema. Deberia ejecutarse cuando pulsas enter en el segundo para poder comprobar varias veces. el 19 ene. 2022 a las 14:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.