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>
<>
) para poder reproducir tu problema en la pregunta misma.