-
Cómo calcular los totales de formulario de pedido en JavaScript
-
JavaScript es un lenguaje de script utilizado para agregar funcionalidad a las páginas web dinámicas. JavaScript se coloca directamente en el HTML de una página web y se utiliza para añadir interactividad, como la retroalimentación de los usuarios y la validación de entrada, a las páginas estáticas de otro modo. JavaScript también interactúa directamente con los elementos de una página web, tales como campos de entrada y botones, por lo que se puede utilizar para actualizar sus atributos. JavaScript se puede utilizar, por ejemplo, hacer un seguimiento de los valores introducidos por un usuario, agregar ellos y proporcionar a la total.Instrucciones
El cálculo de los totales de formulario de pedido en JavaScript
1 Abra un editor de texto y crear un archivo con la extensión .htm. Este archivo contendrá el marcado (HTML) que define la forma y el contenido del formulario: dos campos donde el usuario introduce los números, un botón para calcular un total medida en los dos números, y un campo total que mantiene el total.
<Html>
<Head> </ head>
<Body> <form> </ form> </ body>
</ Html>
2 Agregue tres campos de entrada a la forma. Nombrar el primer campo de entrada "box1," nombre del segundo campo de entrada "caja2" y el nombre del tercer campo de entrada "total". Box1 llevará a cabo el primer número, caja2 el segundo número, y será colocado el total en el campo total. Dar a los campos de entrada de un tamaño de 3 y una longitud máxima de 3.
<Html>
<Head> </ head>
<Body> <form>
<Input type = tamaño del texto = 3 = 3 maxlength name = "box1">
<Input type = tamaño del texto = 3 = 3 maxlength name = "caja2">
<Input type = tamaño del texto = 3 = 3 maxlength name = "total">
</ Form> </ body>
</ Html>
3 Añadir un botón HTML al formulario. Al hacer clic, el botón pasa a la forma y sus elementos (this.form) a una función JavaScript llamada RunTotal (). Llame a la función utilizando el evento onClick () y darle al botón de un nombre con el valor = atributo.
<Html>
<Head> </ head>
<Body> <form>
<Input type = tamaño del texto = 3 = 3 maxlength name = "box1">
<Input type = tamaño del texto = 3 = 3 maxlength name = "caja2">
<Input type = tamaño del texto = 3 = 3 maxlength name = "total">
<Input type = "button" onclick = "RunTotal (this.form)" value = "Calcular Total intermedio">
</ Form> </ body>
</ Html>
4 Añadir una función de JavaScript (RunTotal ()) para el código HTML <head> sección entre JavaScript <script> y </ script>. Esta función recibe los elementos de formulario, añade los valores de la caja 1 y caja2 y coloca el resultado en el campo de entrada total. Utilice forward-barras (//) para indicar comentarios.
<Html>
<Head>
<Script language = "javascript" type = "text / javascript">
función RunTotal (myForm) {
// Código va aquí
}
</ Script>
</ Head> <body>
<Form>
<Input type = tamaño del texto = 3 = 3 maxlength name = "box1">
<Input type = tamaño del texto = 3 = 3 maxlength name = "caja2">
<Input type = tamaño del texto = 3 = 3 maxlength name = "total">
<Input type = "button" onclick = "RunTotal (this.form)" value = "Calcular Total intermedio">
</ Form> </ body>
</ Html>
5 Declarar dos variables y asignarles los valores de la caja 1 y caja2. JavaScript utiliza el signo más (+) para concatenar cadenas, a fin de utilizar la función Number () para asegurarse de que JavaScript realiza una suma al agregar los valores.
<Html>
<Head>
<Script language = "javascript" type = "text / javascript">
función RunTotal (myForm) {
// Código va aquí
// Declarar variables y asignar box1 y caja2.
var = Número form_field1 (myForm.box1.value);
var = Número form_field2 (myForm.box2.value);
}
</ Script>
</ Head>
<Body> <form>
<Input type = tamaño del texto = 3 = 3 maxlength name = "box1">
<Input type = tamaño del texto = 3 = 3 maxlength name = "caja2">
<Input type = tamaño del texto = 3 = 3 maxlength name = "total">
<Input type = "button" onclick = "RunTotal (this.form)" value = "Calcular Total intermedio">
</ Form> </ body>
</ Html>
6 Añadir los dos valores de las variables y actualizar el campo total con el resultado.
<Html>
<Head>
<Script language = "javascript" type = "text / javascript">
función RunTotal (myForm) {
// Código va aquí
// Declarar variables y asignar box1 y caja2.
var = Número form_field1 (myForm.box1.value);
var = Número form_field2 (myForm.box2.value);
// Añadir las variables y actualizar el valor del campo total con el resultado.
myForm.total.value = form_field1 + form_field2;
}
</ Script>
</ Head>
<Body> <form>
<Input type = tamaño del texto = 3 = 3 maxlength name = "box1">
<Input type = tamaño del texto = 3 = 3 maxlength name = "caja2">
<Input type = tamaño del texto = 3 = 3 maxlength name = "total">
<Input type = "button" onclick = "RunTotal (this.form)" value = "Calcular Total intermedio">
</ Form> </ body>
</ Html>
7 Abra la página .htm en un navegador. Escriba un número en caja 1, un número en caja2, y haga clic en el botón para agregar los números. El total aparecerá en el campo total.
Consejos y advertencias
- Utilice la opción "value = 0" con la caja 1 y caja2 para darles un valor inicial de 0 cuando se carga la página.
- Añadir un poco de texto antes de que el campo total para separarlo de los otros campos de la página.
- Este JavaScript añade dos valores para la simplificación. Utilizar un bucle y matrices de valores para hacer el código más flexible.
- Trate de usar el evento onchange () en la caja 1 y caja2 para calcular el total ya que los usuarios entran en valores.
- Asegúrese de utilizar la función Number () para evitar la concatenación de los valores en la caja 1 y caja2. Por ejemplo, la adición de 1 y 2 debería dar lugar a 3, no 12.
- Si el usuario escribe un carácter en la caja 1 o caja2, el campo total será NaN o no un número.