Diferencia entre revisiones de «Asignar una clase con submit»

De enunpimpam
Saltar a: navegación, buscar
 
(No se muestran 2 ediciones intermedias del mismo usuario)
Línea 14: Línea 14:
 
   $modal.style.animation = 'modalIn .8s forwards'; // añade el estilo modalIn de 8 segundos se queda en la posición final.
 
   $modal.style.animation = 'modalIn .8s forwards'; // añade el estilo modalIn de 8 segundos se queda en la posición final.
 
}; </syntaxhighlight>
 
}; </syntaxhighlight>
 +
Cerrar el modal
 +
<syntaxhighlight lang="js">
 +
const $cerrarModal = document.getElementById("cerrar-modal");
 +
 +
$cerrarModal.addEventListener('click', cerrarModal); //al hacer click ejecuta la función cerralModal
 +
  function cerrarModal(){
 +
    $overlay.classList.remove('active'); // quita la clase activa
 +
    $modal.style.animation = 'modalOut .8s forwards'; // Sale 8 segundos
 +
  }</syntaxhighlight>
 +
 +
== Añadir mas de un objeto ==
 +
La función <code class="alert-info>setAtributos</code> tiene el for que recorre todo el objeto <code class="alert-success>atributos</code> y los incluirá con el nombre y el parámetro que se han declarado. y asigna un <code class="alert-success>atributo</code> por cada objeto.
 +
 +
Con el metodo <code class="alert-info>setAttribute</code> se añaden los objetos al elemento.
 +
<syntaxhighlight lang="js">
 +
function setAtributos($elemento, atributos) {
 +
    for (const atributo in atributos) {
 +
      $elemento.setAttribute(atributo, atributos[atributo]);     
 +
}}</syntaxhighlight>
 +
<syntaxhighlight lang="js">
 +
  const $featuringContenedor = document.getElementById("featuring");
 +
 +
  $form.addEventListener("submit", event => {
 +
    event.preventDefault() //para quitar que el formulario recarge siempre la pagina
 +
    $home.classList.add('search-active')
 +
    const $loader = document.createElement('img'); //crea el elemento img
 +
    setAtributos($loader, {
 +
      src: 'src/images/loader.gif',
 +
      height: 50,
 +
      width: 50,
 +
    })
 +
    $featuringContenedor.append($loader)
 +
  });</syntaxhighlight>

Revisión actual del 17:55 10 ago 2020

const $home = document.getElementById("home");

$form.addEventListener("submit", event => {
   event.preventDefault() //para quitar que el formulario recarge siempre la pagina
   $home.classList.add('search-active')
});

Si tenemos que asignar clases o stylos a mas de un elemento lo mejor es realizar una función y llamarla con el Submit.

function showModal() {
   $overlay.classList.add('active'); // añade la clase active
   $modal.style.animation = 'modalIn .8s forwards'; // añade el estilo modalIn de 8 segundos se queda en la posición final.
};

Cerrar el modal

const $cerrarModal = document.getElementById("cerrar-modal");

$cerrarModal.addEventListener('click', cerrarModal); //al hacer click ejecuta la función cerralModal
  function cerrarModal(){
    $overlay.classList.remove('active'); // quita la clase activa
    $modal.style.animation = 'modalOut .8s forwards'; // Sale 8 segundos
  }

Añadir mas de un objeto

La función setAtributos tiene el for que recorre todo el objeto atributos y los incluirá con el nombre y el parámetro que se han declarado. y asigna un atributo por cada objeto.

Con el metodo setAttribute se añaden los objetos al elemento.

function setAtributos($elemento, atributos) {
    for (const atributo in atributos) {
      $elemento.setAttribute(atributo, atributos[atributo]);      
}}
const $featuringContenedor = document.getElementById("featuring");

  $form.addEventListener("submit", event => {
    event.preventDefault() //para quitar que el formulario recarge siempre la pagina
    $home.classList.add('search-active')
    const $loader = document.createElement('img'); //crea el elemento img
    setAtributos($loader, {
      src: 'src/images/loader.gif',
      height: 50,
      width: 50,
    })
    $featuringContenedor.append($loader)
  });