Problema con ejercicio con objeto DOM

jamatbar · 21 Febrero 2021, 20:09 PM

Buenas tengo el siguiente ejercicio:

Implementa una lista interactiva a través de flechas que permita mover los elementos hacia arriba y hacia abajo.

https://ibb.co/10dDKqS

Descarga los ficheros proporcionados en esta carpeta compartida de Google Drive e implementa las funciones descritas en el fichero JS.

Consideraciones:

Los ficheros HTML y CSS no deben modificarse.
Antes de empezar a escribir código javascript, analiza la estructura del documento HTML, cómo están formados los elementos de la lista y las clases que utilizan.

-----------------------------------------
Basicamente son 5 elementos li que hay que mover arriba y abajo con la particularidad de que el primer y ultimo elemento tienen los botones de arriba o abajo deshabilitados, y esa ultima parte es la que no consigo.

Yo tengo lo siguiente:

Código (javascript) [Seleccionar]

window.onload = function()
{
/**
 * 1. Obtén todos los elementos li como una HTMLCollection dinámica en la
 * constante "oElementosLi". [0,5 puntos]
 */
const oElementosLi = document.getElementsByTagName("li");

/**
 * 2. Obtén una NodeList estática con todas las flechas (elementos span que 
 * contienen la clase "flechaArriba" y "flechaAbajo") en la constante
 * "oFlechas". [0,75 puntos]
 */
const oFlechas = document.querySelectorAll('span.flechaArriba, span.flechaAbajo');


/**
 * 3. Añade un manejador del evento click a cada flecha usando la NodeList 
 * "oFlechas", un bucle "forEach" y la notación flecha. Al hacer click en
 * una flecha se debe llamar a la función "actualizarLista". [1,75 puntos]
 */

oFlechas.forEach(oFlecha => { 
    oFlecha.addEventListener("click", actualizarLista);
});

/**
 * 4. Implementa la función "actualizarLista" para que:
 *  
 *  -Intercambie el elemento li sobre el que se ha hecho click con su hermano
 *  anterior o posterior dependiendo si se ha pulsado la flecha arriba o
 *  abajo. Pulsar la flecha arriba en el primer elemento o la flecha abajo en 
 *  el último no realizará ninguna operación. Utiliza la función 
 *  "insertAdjacentElement" y las referencias "parentNode", previousElementSibling"
 *  y "nextElementSibling". [4 puntos]
 * 
 *  -Elimine la clase "flechaDeshabilitada" de los elementos que la contengan 
 *  y la añada a la flecha arriba del primer elemento y a la flecha abajo del
 *  último elemento. [3 puntos]
 */
function actualizarLista(event) {
    const oFlecha = event.target;
    const oFlechaActual = oFlecha.parentNode;
    const oFlechaAnterior = oFlechaActual.previousElementSibling;
    const oFlechaSiguiente = oFlechaActual.nextElementSibling;

    oFlechas.forEach((oFlecha) => {
        if (oFlecha.classList.contains("flechaDeshabilitada")) {
        oFlecha.classList.remove("flechaDeshabilitada");
        }
        });

    if(oFlecha.className == "flechaArriba"){
        oFlechaAnterior.insertAdjacentElement("beforebegin", oFlechaActual);
    }else if(oFlecha.className == "flechaAbajo"){
        oFlechaSiguiente.insertAdjacentElement("afterend", oFlechaActual);
    }
}
}

Esta es la estructura HTML:

Código (html4strict) [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Lista interactiva</title>
</head>
<body>
  <h1>Lista interactiva</h1>
  <ul>
    <li>
      <span class="flechaArriba flechaDeshabilitada"></span>
      <span class="flechaAbajo"></span>
      <span class="texto">Texto colocado inicialmente en la posición 1.</span>
    </li>
    <li>
      <span class="flechaArriba"></span>
      <span class="flechaAbajo"></span>
      <span class="texto">Texto colocado inicialmente en la posición 2.</span>
    </li>
    <li>
      <span class="flechaArriba"></span>
      <span class="flechaAbajo"></span>
      <span class="texto">Texto colocado inicialmente en la posición 3.</span>
    </li>
    <li>
      <span class="flechaArriba"></span>
      <span class="flechaAbajo"></span>
      <span class="texto">Texto colocado inicialmente en la posición 4.</span>
    </li>
    <li>
      <span class="flechaArriba"></span>
      <span class="flechaAbajo flechaDeshabilitada"></span>
      <span class="texto">Texto colocado inicialmente en la posición 5.</span>
    </li>
  </ul>
  <script type="text/javascript" src="index.js"></script>
</body>
</html>

¿Alguien sabría explicarme como poner la clase deshabilitada en el primer y ultimo elemento?

Muchísimas gracias de antemano!

EdePC · 23 Febrero 2021, 00:23 AM

Pues lo que dice ahí, al final de todo le agregas las clases que se requieren para la primera y última flecha:

Código (javascript) [Seleccionar]

oFlechas[0].className = "flechaArriba flechaDeshabilitada"
oFlechas[oFlechas.length-1].className = "flechaAbajo flechaDeshabilitada"

¿Puedes dejar también el CSS?

Test Foro de elhacker.net SMF 2.1

Problema con ejercicio con objeto DOM

jamatbar

EdePC