Escribí un pequeño script que verifica 3 <input> para su propiedad de valor en vivo y debería corregirlos si el valor en vivo es mayor o menor que el atributo máximo o mínimo. Sin embargo, el script también cambia el valor al máximo tan pronto como se ingresa un número a través del teclado.
Después de un par de horas de prueba, todavía no puedo entender por qué la declaración if siempre se activa incluso cuando el valor en vivo ingresado está por debajo del atributo máximo y lo configura al máximo.
document.querySelectorAll('input').forEach(inputListener => { inputListener.addEventListener('change', function() { //correct inputs if invalid values have been entered let active_input = ['#input-cage-width', '#input-cage-depth', '#input-bedding-data-height']; for (let i = 0; i < active_input.length; i++) { let value_input = document.querySelector(active_input[i]).value, min_input = document.querySelector(active_input[i]).min, max_input = document.querySelector(active_input[i]).max, element = document.querySelector(active_input[i]); if (value_input < min_input) { element.value = min_input; } if (value_input > max_input) { element.value = max_input; } } }); }); <!DOCTYPE html> <html lang="de" dir="ltr"> <head> <meta charset="utf-8"> </head> <body> <input type="number" id="input-cage-width" value="100" min="10" max="200"> <input type="number" id="input-cage-depth" value="50" min="10" max="100"> <input type="number" id="input-bedding-data-height" value="25" min="1" max="100"> </body>Porque está tratando con cadenas, por lo que las comparaciones son comparaciones de cadenas.
Por ejemplo '55' > '200' devuelve verdadero cuando esperaríamos que devuelva falso.
Para solucionarlo, reemplace la línea que establece el mínimo/máximo y el valor así, agregando + delante de cada valor.
let value_input = +document.querySelector(active_input[i]).value, min_input = +document.querySelector(active_input[i]).min, max_input = +document.querySelector(active_input[i]).max, element = document.querySelector(active_input[i]); El + intentaría convertir una cadena en un número.
Cuando ingresa un valor en el cuadro de texto, el valor es una String no un Number y, por lo tanto, las comparaciones no son lo que esperamos.
Entonces, por ejemplo, cuando ingresa 55 en el cuadro, en realidad sería '55' (con comillas, lo que significa una cadena). Lo mismo para el máximo/mínimo.
Para ver esto, simplemente puede ejecutar if('55' > '200') console.log('55 larger than 200!!'); y en realidad lo mostrará.
Esto es lo mismo que if('b' > 'a') console.log('blarger than a!!');
Por otro lado, prueba if(+'55' > +'200') console.log('55 larger than 200!!'); (Observe el + ). Esto no generará nada porque Number(55) no es mayor que Number(200).