0

soy nuevo en el mundo de la programación, empecé en HTML, Css y JavaScript, Tengo este array() llamado datos[], aquí tengo una cantidad x de datos que si o si es una cantidad que es un múltiplo de 5, necesito imprimir en pantalla en filas de 5 en 5 datos. Además de ello debo de poder eliminar una fila en cualquier momento con un botón. mi código solo almacena datos en un array(), intente desarrollar un ciclo for que corte el array de 5 en 5 y que al llegar al dato 5 imprima un '
' pero no da resultado. esta es mi función que debería imprimir en pantalla

          function mostrar(){

            if ((datos.length % 5)==0) {

                    document.getElementById('p1').innerHTML = ('<br>');
            
                    for (var i = 0; i <= datos.length; i++) {

                    document.getElementById('p1').innerHTML += datos[i];    
                                                            }

            } else {

                    for (var i = 0; i <= datos.length; i++){

                    document.getElementById('p1').innerHTML += datos[i].value ; 

                                                            };

            };

          }

creo que tiene errores de lógica, muchísimas gracias por su ayuda

1 respuesta 1

0

La idea es simple, recorrer el array y al encontrar el módulo de 5 crear una nueva fila, que en la practica será un nuevo <li> dentro de un contenedor <ul>.

Para ir generando el contenido de las filas, se utilizará una variable que permita ir concatenando los valores, para que a la hora de imprimir una nueva fila, este se restablezca.

Al hacer clic sobre una fila, esta se eliminará (Esta parte puedes modificarla a tu gusto luego).

Dado que posiblemente se trata de una tarea, te invito a refactorizar mi código para que consigas una sintaxis más limpia.

Para ello te invito a revisar las funciones de array en js y particularmente los métodos slice y reduce.

let datos = ['v1','v2','v3','v4','v5','v6','v7','v8','v9','v10'];
let content = ""

datos.forEach((element, index)=>{
  if((index+1)%5==0){
    addValueToContent(element)
    addRow()
  }else{
    addValueToContent(element)
  }
})

function addValueToContent(element){
  content = `${content} ${element}`
}

function addRow(){
  let container = document.querySelector('ul.list')
  container.appendChild(buildLi())
  content = ""
}

function buildLi() {
    let li = document.createElement('li');
    li.textContent = content;
    li.onclick = function(){
     this.parentElement.removeChild(this);
    }
    return li;
}
<ul class="list">
</ul>

3
  • una pregunta, ¿que haces con el content, sino lo retornas en la funcion?
    – Christian
    Commented el 19 may. 2021 a las 5:04
  • @Christian, content es una variable global, solo la actualiza dentro de la función y la usa en buildLi() para crear el elemento de lista.
    – Triby
    Commented el 19 may. 2021 a las 14:04
  • @Tirby ha yap, gracias por la aclaración. 😄
    – Christian
    Commented el 19 may. 2021 a las 14:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.