Este artículo es continuación del artículo Programación (7) Conceptos básicos. Funciones y eventos donde se verá un ejemplo sin tener que utilizar una variable fija o cambiar manualmente el valor de la variable para que la función realice el cálculo el IVA de un importe.
Aparecen conceptos nuevos que se irán definiendo previamente, para poder entender el funcionamiento de los elementos que intervienen en el lenguaje javaScript para crear un botón que nos permita realizar este cálculo de IVA de cualquier valor simplemente introduciéndolo en una casilla de html.
Trabajaremos en este caso en un archivo .js donde introduciremos todo el lenguaje de javaScript que estará enlazado con el archivo .html por medio de un línea en el <head> tal como:
<script type = «text/javascript» src = «js/ nombre del archivo .js»>>/script>
El primer elemento a definir es: window.onload = inici; Se posiciona como primera línea del archivo .js, es obligatoria y significa que hay una función, en este ejemplo, que se llama inici, que se va a ejecutar cuando el navegador html cargue la página y lea todo el contenido del archivo .html.
Se trata de un evento (todos los eventos empiezan por on). Cuando toda la ventana del navegador se carga lee la función que se indica, que en este caso es inici.
Para que JavaScript llame a un elemento del Body de html o creado dinámicamente, los cuales se encuentran posicionados después del lenguaje de JavaScript dentro de una página .html, hay que utilizar:
document.getElementById(«nombre del elemento llamado»)
JavaScript coge el elemento que puede ser una imagen, un botón, una caja…
Esta es la llamada que hace JavaScript. A partir de ahí se puede utilizar el innerHTML, que es para crear el contenido dentro del elemento llamado, que en este caso es una caja.
document.getElementById(«caja»).innerHTML. Con innerHTML puedo cambiar el contenido de una caja. Es para crear contenido.
Esta lectura que realiza JavaScript de un elemento del Body del archivo .html no funciona por ella misma, sino que se ha de encontrar dentro de una función.
Por lo que se creará la función calcular_iva utilizando todos estos elementos comentados, que cogerá la cantidad del < input id> del body html. Un Input es un elemento de html que permite introducir un valor.
En un primer encaje de la solución al problema podríamos tener lo siguiente:
Esta estructura así la tendríamos en el navegador:
Como se puede ver, en la función inici, que es llamada con el evento onload comentado, además de llamar al elemento div id= quantitat, que es la cantidad que vamos a introducir para realizar el cálculo de IVA, se ha indicado ya un elemento que tiene el evento de clic, como es el caso de un botón.
En esta función inici, se ha de hacer cada elemento clicable tenga su evento en esta función. «Calcular» es el nombre del botón en el archivo html, y el evento es onclick, es decir, realizar clic en el botón. La función calcular_iva hay que definirla.
Donde se ha indicado una variable local let valor que sea el input quantitat en formar de número por lo que se ha indicado number al inicio de la expresión para que java no entienda el input como un string o letra.
En la segunda caja le diremos que a+b= suma de los parámetros, y que se vea todo en el navegador. Para ello realizaremos la función de la caja 2:
Se ha indicado en la llamada a la segunda caja, después del innerHTML += porque se quiere mostrar reiteradamente el evento indicado para esta segunda caja, y además se ha añadido <div> para que cada resultado reiterado de la caja dos se muestre en una caja diferente y que es encuentra en la línea siguiente . Ya que se trata de contenido dinámico.
Y en el navegador la caja uno y la caja dos se veran al introducir un valor de la siguiente forma:
Contenido Web de Yolanda Muriel está sujeto bajo Licencia Creative Commons Atribución-NoComercial-SinDerivadas 3.0 Unported.
yolandamuriel.com 
1 Comment