Diferencia entre revisiones de «Asiginar Class con classList.add»

Revisión actual del 13:12 11 ago 2020

Primero localizamos el elemento que al que queremos añadir una clase o varias.

document.getElementById('spinner')

document.getElementById('spinner').classList.add('lds-hourglass', 'mx-auto', 'd-block');

Asignar con submit

Podemos añadir una clase con las clases en un submit

const $form = document.getElementById("form"); //Seleccionamos form
const $spinner = document.getElementById('spinner'); //Seleccionamos elemento

  $form.addEventListener("submit", event => {
   event.preventDefault()
   $spinner.classList.add('lds-hourglass', 'mx-auto', 'd-block');
   const data = new FormData($form)
   debugger // CUIDADO ...!!!!
})

Si esta el debugger activo, podemos ir a la consola data.get('buscar') comprobamos que ahi esta el valor introducido en el input

@@ Línea 6: / Línea 6: @@
 <syntaxhighlight lang="js">
 document.getElementById('spinner').classList.add('lds-hourglass', 'mx-auto', 'd-block');</syntaxhighlight>
+==Asignar con submit==
+Podemos añadir una clase con las clases en un submit
+<syntaxhighlight lang="js">
+const $form = document.getElementById("form"); //Seleccionamos form
+const $spinner = document.getElementById('spinner'); //Seleccionamos elemento
+  $form.addEventListener("submit", event => {
+   event.preventDefault()
+   $spinner.classList.add('lds-hourglass', 'mx-auto', 'd-block');
+   const data = new FormData($form)
+   debugger // CUIDADO ...!!!!
+}) </syntaxhighlight>
+Si esta el debugger activo, podemos ir a la consola <code class="alert-info>data.get('buscar')</code> comprobamos que ahi esta el valor introducido en el input