Depuración final del código JavaScript

Translator

 En esta lección, vamos a hacer algunas depuraciones y mejorar un poco el funcionamiento de la aplicación.  

En este momento, el estado actual es que hacemos la solicitud al `doGet`, por lo que obtenemos la salida en vivo de las hojas de cálculo. Y cada vez que hacemos clic en los botones, estamos enviando una solicitud POST de vuelta a la aplicación web, lo que actualiza los valores en el lado del servidor. Además, está devolviendo el nuevo valor dentro de esa respuesta. Así que podemos usar eso y no tener que actualizar todo el contenido de la aplicación web constantemente; podemos actualizar solo el valor contenido en la celda.  

Así que adelante, hagamos esos cambios. Entrando en el JavaScript, donde estamos manejando el evento: `sendData`. También deberíamos enviar el objeto del elemento, así que dentro de `sendData`, tomemos el botón. Este va a enviar el objeto del botón dos, y este otro va a enviar el objeto del botón uno. De esta manera, sabremos qué elemento invocó el `sendData` y, una vez que obtengamos la respuesta del elemento, podemos actualizar el valor del `innerHTML` con el nuevo valor.  

Lo que queremos hacer es que ambos serán iguales, donde el `innerHTML` será el indicador de "arriba" o "abajo". Tenemos la opción de eliminar eso del elemento. Primero, tomemos el elemento que se ha pasado y actualicemos el `innerHTML` con el JSON. Esto va a obtener el valor que se está devolviendo desde el script de Google Apps. Sea cual sea ese valor, no tendremos que rehacerlo. Actualizando el HTML con ese valor, hagamos una actualización del código. Ahora debería actualizarse con el valor correspondiente. No está actualizando la página en sí y estamos perdiendo las flechas de arriba y abajo.  

Así que usemos un método de cadena y cortemos la primera parte. Creemos una variable y, desde cualquier contenido de texto del elemento, comenzando en el índice cero y terminando en el índice seis, eso no debería tomar un inicio ya que los métodos de cadena en JavaScript funcionan de la misma manera que los métodos de tres. Entonces, basado en cero, obteniendo los primeros seis caracteres es cero, coma cinco. Y registraré lo que hemos obtenido del campo, porque estamos usando `textContent`, está tratando todos los indicadores como un solo elemento, así que podemos eliminar solo el primer elemento y eso nos dará el indicador. Actualicemos el `slice` a dos. Así que estamos obteniendo los primeros dos caracteres. Eso está haciendo la selección y manteniendo los indicadores intactos. No tiene que recargar la página.  

Además, cuando entramos en la hoja de cálculo, nuestros datos están sincronizados con lo que tenemos en la aplicación web. Así que hagamos algunas otras cosas y apliquemos algo de estilo a esos indicadores también. Esto depende de tus preferencias personales. Quiero actualizar los botones para hacer que el tamaño de la fuente sea un poco más grande. Un pie, cinco p.m., y configuremos el color en blanco. Y luego, para los propios botones, vamos a agregarle al botón uno tomando la lista de clases y añadiendo la clase de "botón". Hagamos lo mismo para el dos. De esta manera, es un poco más fácil usar el estilo en lugar de tener que usar JavaScript, pero, nuevamente, depende de ti según tus preferencias. También agreguemos un poco de relleno para que sean más grandes.  

Ahora tenemos indicadores que se están actualizando y también están sincronizados con el contenido dentro de la hoja de cálculo. Adelante, actualiza y añade eso a tu proyecto. Y a continuación, haremos una revisión completa.