Botones interactivos en la página con JavaScript

Translator

 En esta lección, vamos a hacer que los botones que configuramos en la lección anterior sean interactivos. Así que ya tenemos los botones dentro del código. Volvamos al editor. Uno de los objetos se llama "Button one". Vamos a añadir un escuchador de eventos, así que agreguemos un `event listener`. Escucharemos el evento de un clic y, cuando se haga clic, el evento que queremos que ocurra es ejecutar la función, pasando el objeto de evento. Luego manejaremos y añadiremos algo de contenido adicional aquí.

Lo que queremos pasar es configurar un objeto temporal, y dentro de este objeto temporal, queremos pasar el resultado. El resultado será un clic del botón uno, que corresponde a "up" (arriba). Entonces, el resultado será "up", y para la fila, la información de la fila está contenida dentro del objeto del elemento. Así que ya tenemos la información. Creemos una nueva función que maneje el envío de los datos. La llamaremos `sendData`, y recogerá la información del objeto que se pasa. Por ahora, lo que haremos será registrar en la consola la información del objeto y eliminar los otros valores de la consola que tenemos. Así tendremos una consola completamente limpia. Guardemos eso. Ahora no hay nada en la consola.

Entonces, cada vez que se haga clic en el botón, pasaremos el valor de `temp` al objeto. Luego, esto manejará la publicación (`post`) al servidor, hacia el script de Google Apps. Así que, cada vez que hagamos clic en "up", estaremos enviando la información junto con qué botón fue clicado. Además, hagámoslo para el botón dos, que será el botón de "down" (abajo), y la misma información que estamos pasando. Entonces, el botón de abajo también quedará configurado y, al hacer clic, pasará los valores de "down" a la página.

A continuación, vamos a hacer la solicitud `post` al servidor con la información de los escuchadores de eventos. Eso aún está por venir en la próxima lección, así que actualizaremos `sendData` y luego crearemos un punto final que recibirá el `post` dentro del script de Google Apps. Todo eso aún está por llegar. Adelante, añade los escuchadores de eventos en tus botones y estarás listo para pasar a la siguiente lección.