Capitulo 3 ➜ Agregando eventos con Javascript

Agregar hijos a un elemento con appendChild.

Dentro de todas las cosas que te permite hacer el manejo del dom en javascript, el appendChild es uno de los métodos que más usarás, dicho método está disponible en todos los objetos element, como lo es nuestra variable “todos los cursos”, y permite que le coloquemos un hijo al elemento que lo use, claramente el hijo que le vamos a agregar a “Todos los cursos” será row, (la fila que hicimos con los backticks); recuerda que row está usando su propiedad innerhtml por lo que su contenido será interpretado no como texto, sino como html, entonces en el carrito ya estará nuestra fila, con el nombre del curso, el precio y la equis, pero sin imagen porque deje el src vacío

Agregar eventos con addEventListener.

los event liseners son en pocas palabras, funciones que están registradas a un elemento, para ejemplificarlo, en el video se crea un elemento nuevo, llamado “button vaciar carrito” y se le iguala al botón que tenemos en la tabla desplegable de nuestro carrito, esto con el objetivo de poder borrar todos los cursos que estén dentro del carrito, por ahora el único curso que tenemos es el de nuestra otra constante row, pero la idea es llenar el carrito con los cursos que gustes, y debe haber un botón que borre todos los cursos de golpe, ese es el que vamos a buscar con “getElementById”, y el id que buscamos es “vaciar carrito”; entonces, una vez en el sitio, se marquen dos elementos, el botón que pone “vaciar carrito” es el que acabamos de capturar, pero dicho botón ahora mismo no funciona, aunque lo presionen no va a hacer nada, recuerden que lo capturamos en primer lugar para probar cómo funcionan los event listeners, asi que vamos con eso, voy a borrar este consol log para que solo quede el del botón. ahora, con javascript tenemos que esperar a que ciertos eventos ocurran en tu sitio web para que este empiece a funcionar, en nuestro botón vaciar carrito, vamos a usar el método addEventListener para justamente esperar que suceda un evento, ahora ¿cual evento? el que yo estoy buscando es click, que obviamente saltara cuando el usuario clique sobre el elemento, y ¿a qué me refiero con saltar? pues que debe haber una función que se disparé cuando suceda el evento, y esa función es “vaciar carrito” asi que como segundo parámetro del addeventlisener se pone el nombre de esa función; pero claro dicha función no existe así que tenemos que crearla, entonces escribimos: function, seguido del nombre de la función, que ya lo tenemos, seguido de paréntesis, y el contenido en llaves, lo que quiero hacer es crear un ciclo while que se mantenga constantemente revisando el contenido que hay en todos los cursos, eso se hace con la propiedad first child que nos da la referencia al primer hijo del elemento; mientras haya elementos, entraremos en este bucle, recuerden que la variable “todos los cursos”, es el tbody del carrito y tiene un hijo, row, que será detectado por la propiedad en cuestión, first child, ese primer hijo que tiene la variable todos los cursos se tiene que borrar para que el segundo hijo se convierta en el primero; ¿y como lo borramos? con removeChild() para ello tenemos que darlo como parámetro, pero ¿acaso tenemos su referencia? pues si la tenemos, es justo el elemento que se encuentre referenciado por el bucle en el momento, me refiero a que otra vez usaremos first child; se que no tenemos un segundo elemento, pero de haberlo, se convertiría en el primero como ya dije y ese se termina borrando haciendo que un tercer elemento, de existir se convierta en el primer elemento y así también sea borrado por removeChild(), todo esto es posible porque el bucle va a funcionar hasta que nos quedemos sin elementos hijos; una vez guardado el archivo y recargado el sitio, podemos ver el funcionamiento del botón, y como el botón ya funciona, se borrara todo el contenido del carrito, porque recuerda que gracias a nuestro bucle, si hubieran mas cursos en el carrito, también se borrarán; ahora, no porque la variable todos los cursos se quede sin hijos, deja de existir, no porque borremos su contenido, deja de existir, ahí estará lista para que le pongamos cursos nuevamente, pero eso lo dejaremos ya para la siguiente lección.