¿Cómo puedo tener un límite de número? Estoy tratando de hacerlo para que solo pueda escribir el número 1-100 en "app-benutzer" y 1-15 en "backend-benutzer". También hay una manera de mostrar estos números en el campo de entrada sin escribirlos para que mostraría al usuario que solo puede escribir el número del 1 al 15.
html: <body> App-Benutzer: <input type="number" min="1" max="100" class='appuser'></input><br> Backendbenutzer: <input type="number" min="1" max="15" class='backenduser'></input><br> <button class='calcit'>Berechnen</button><br> <span class='summe'>0.00</span><br> <script src="./app.js"></script> </body> js: const btncalc = document.querySelector('.calcit'); const summetext = document.querySelector('.summe'); btncalc.addEventListener('click', function(){ var backendanzahl= document.getElementsByClassName("backenduser")[0].value; var appanzahl= document.getElementsByClassName("appuser")[0].value; var mytext="Anzahl der Summe:" + (+backendanzahl * 35 + +appanzahl * 7.5) ; summetext.textContent = mytext; });Puede lograr esto solo usando HTML.
De esta manera, realmente no puede escribir nada más que lo que especifica en sus términos.
Aclaración:
El Placeholder de posición es el atributo que usa para colocar texto dentro de su campo de entrada, pero ese texto desaparecerá tan pronto como haga clic en su elemento.
oninput es el Evento que ocurre cada vez que el value de su elemento de input ha cambiado. Básicamente, cada vez que escribe 1 número/letra/lo que sea, se activará el evento oninput .
Ahí es donde ponemos nuestra condición.
this.value - representa lo que escribimos dentro de nuestro elemento de input .nuestro valor (this.value) = if (this.value > 100) (? representa algo así como return) return 100 ((:) es como otra cosa) else return this.value
this.value = this.value > 100 ? 100 : Math.abs(this.value)
es equivalente a
if(this.value > 100) //this.value is what we write inside of the field return 100; else return this.value; <body> App-Benutzer: <input type="number" min="1" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value)" class='appuser' placeholder='1-100'></input><br> Backendbenutzer: <input type="number" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value)" class='backenduser' placeholder='1-15'></input><br> <button class='calcit'>Berechnen</button><br> <span class='summe'>0.00</span><br> <script src="./app.js"></script> </body>Puede usar el atributo de placeholder de posición del campo de entrada para poner el texto que desee. Este texto desaparecerá una vez que el usuario comience a editar el campo. En su caso, puede colocar un marcador de posición para visualizar "1-15".
<body> App-Benutzer: <input type="number" min="1" max="100" class='appuser' placeholder="Input a value from 1 to 100"></input><br> Backendbenutzer: <input type="number" min="1" max="15" class='backenduser' placeholder="Input a value from 1 to 15"></input><br> <button class='calcit'>Berechnen</button><br> <span class='summe'>0.00</span><br> <script src="./app.js"></script> </body>Además de la otra respuesta, puede agregar una longitud máxima. De esta manera podría limitar la longitud de la entrada, en su caso "2" o "3". Para mostrar los números, puede especificar un marcador de posición como este:
<input type="number" maxlength="3" class='appuser' placeholder="1-100"></input>Si desea limitar los valores posibles y no lidiar con los errores, puede usar un menú desplegable o algo similar.