0

Tengo un div vacio al principio, place, donde inserto el div.full de la ultima noticia, al cargar la pagina. Luego, tres divs "col", cada uno con su div.sumary,div.full, y su boton , el span:more. La idea es que , al click del boton, se borre el div hijo de place, el cargado de la ultima noticia, y lo reemplace con el div.full del div del boton clickeado. y, segun el orden de click, lo agrega, y se ven dos noticias. Algo me falla con el btnmas[i], que probe fuera de la instruccion, pero no funciona, tampoco. Alguna idea?

<div id="page">
    <div id="place">
    </div>
    <div class="row">
        <div class"col">
            <div class="sumary">
                sumary1
                <span class"more"></span>
            </div>
        <div class"full">
            full1
        </div>
        </div>
        <div class"col">
            <div class="sumary">
                sumary2
                <span class"more">
                </span>
            </div>
            <div class="full">
                full2
            </div>
        </div>
        <div class"col">
            <div class="sumary">
                sumary3
                <span class"more">
                </span>
            </div>
            <div class="full">
                full3
            </div>
        </div>
    </div>
</div>
let todo = document.getElementsByClassName('full');
let btnmas = document.getElementsByClassName ("more");
let place = document.getElementById ("showlast");
let ultima = document.getElementsByClassName('full')[0];
place.appendChild (ultima);




for (let i = 0; i < btnmas.length; i++) {
  btnmas[i].innerHTML = "Leer más...";
  btnmas[i].addEventListener('click', myFunction );


function myFunction() {
  var x = todo[+i];
  var z = place.childNodes[0];
  if (x.style.display === 'none') {
    place.removeChild (place.childNodes[0]);
    x.style.display = 'block';
    place.appendChild(x);
  } else {
    
    x.style.display = 'none';
    place.removeChild;
  }

}
´´´
1
  • Para poder reproducir el problema en la pregunta misma, podés crear un snippet (con el botón que indica <>). Leé Cómo preguntar y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 5 ene. a las 10:13

1 respuesta 1

0

Cosas que veo que estan mal en tu codigo:

  1. Primero de todo las clases de elementos HTML: En tu código HTML, no están correctamente asignadas. Deberías usar class= en lugar de class". Por ejemplo, en lugar de <div class"col">.

  2. Referencia a elementos inexistentes: Estás intentando obtener un elemento con el id “showlast” que no existe en tu HTML. Deberías cambiar let place = document.getElementById ("showlast"); por let place = document.getElementById ("place");.

  3. Ámbito de la variable i: En tu función myFunction, estás utilizando la variable i que está fuera del ámbito de la función. Esto podría causar problemas. Una solución sería pasar i como un argumento a myFunction.

  4. Eliminación de elementos: En la línea place.removeChild;, parece que te has olvidado de pasar el nodo que quieres eliminar como argumento.

Prueba esto haber si te soluciona el problema:

let btnmas = document.getElementsByClassName("more");
let place = document.getElementById("place");
let ultima = document.getElementsByClassName('full')[0];
place.appendChild(ultima);

for (let i = 0; i < btnmas.length; i++) {
  btnmas[i].innerHTML = "Leer más...";
  btnmas[i].addEventListener('click', function() { myFunction(i); });
}

function myFunction(i) {
  var x = todo[i];
  var z = place.childNodes[0];
  if (x.style.display === 'none') {
    place.removeChild(place.childNodes[0]);
    x.style.display = 'block';
    place.appendChild(x);
  } else {
    x.style.display = 'none';
    place.removeChild(place.childNodes[0]);
  }
}
2
  • Muchas gracias. Mi mayor problema era con el ambito de la variable i, que no sabia como sacarla para usarla luego. Commented el 6 ene. a las 16:48
  • @pablofernandez Si te he resuelto la duda por favor bota a favor de la respuesta y márcala como resuelta! Muchas gracias!
    – Stefan
    Commented el 6 ene. a las 19:18

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.