En este artículo, sabremos qué etiqueta será útil para representar el resultado del cálculo. El problema principal es calcular los dos o más números en función de la entrada del usuario y, en consecuencia, generar la salida para el cálculo. Para mostrar la salida, usaremos la etiqueta <output> que se usa para representar el resultado de un cálculo. Esta etiqueta también se puede utilizar para el cálculo de números grandes y complejos. Podemos usar la etiqueta <number> así como también la etiqueta <range>. Todas estas operaciones se realizarán dentro de la etiqueta <form> .
Terminología importante utilizada:
- Evento oninput : cuando un elemento recibe una entrada del usuario, solo se produce el evento oninput. Tomamos algunos aportes de los usuarios usando la etiqueta <input>. cuando la entrada tomada por la etiqueta <input> ha cambiado, solo ocurre este evento. El atributo oninput es nuevo en HTML5.
- Función parseInt() : Usamos la función parseInt() para tomar string y radix como parámetro, luego se transferirá a entero. El parámetro radix se utiliza para especificar qué sistema numérico se utilizará. Si la string no contiene un valor numérico, devuelve NaN, es decir, no es un número.
- Etiqueta <salida> : La etiqueta <salida> en HTML se utiliza para representar el resultado de un cálculo. Esta etiqueta también se utiliza para realizar un cálculo grande. Básicamente, esta etiqueta toma dos o más entradas del usuario y luego muestra el resultado de la salida.
Acercarse:
- Primero, colorearemos el fondo con un color azul claro. esta operación se realizará en la etiqueta <body>.
- Luego inicialice la etiqueta <form>.
- En la etiqueta <form>, tomaremos un total de tres entradas. Las tres entradas serán del tipo <número>. Además, también puede usar la etiqueta <range>.
- El primer número ingresado se inicializará por 10. Luego tenemos que multiplicar con el segundo número insertado. que se inicializa con 10.
- Luego reste el tercer número del número total que se inicializa en 100.
- Use la etiqueta <output> y declare el nombre y asigne el valor como ‘sou’.
- Luego tenemos que escribir <form oninput=”sou.value=parseInt(gfg.value)*parseInt(gho.value)-parseInt(ar.value)”>. Esto significa que las dos primeras entradas se multiplicarán y luego la tercera se restará del número total y luego el resultado se almacenará para nombrar ‘sou’.
Ejemplo 1: aquí, solo hemos utilizado las entradas como un tipo de número.
HTML
<!DOCTYPE html> <html> <body bgcolor="lightblue"> <h1>The GeeksforGeeks Output Example</h1> <form oninput= "sou.value=parseInt(gfg.value)*parseInt(gho.value)-parseInt(ar.value)"> <input type="number" id="gfg" value="10"> x <input type="number" id="gho" value="10"> - <input type="number" id="ar" value="100"> = <output name="sou" for="gfg gho ar"></output> </form> </body> </html>
Producción:
Etiqueta HTML <salida>
Ejemplo 2: Aquí, hemos usado dos entradas como tipo de número y una como tipo de rango. Aquí, solo hemos cambiado el segundo tipo de entrada como rango.
HTML
<!DOCTYPE html> <html> <body bgcolor="lightblue"> <h1>The GeeksforGeeks Output Example</h1> <form oninput= "sou.value=parseInt(gfg.value)*parseInt(gho.value)-parseInt(ar.value)"> <input type="number" id="gfg" value="10"> x <input type="range" id="gho" value="10"> - <input type="number" id="ar" value="100"> = <output name="sou" for="gfg gho ar"></output> </form> </body> </html>
Producción:
Elemento HTML <input> con valor de rango
Publicación traducida automáticamente
Artículo escrito por sounetraghosal2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA