2

Tengo un carrusel corrusel introducir la descripción de la imagen aquí

quiero, he programado el siguiente js para obtener su valor y luego añadirlos de bajo de la imagen con una etiqueta <p></p>

let items = document.querySelector('.portfolop-lodging ');



for(i = 0; i < items.childElementCount; i++){
   item =items.childNodes[i];
   title = item.querySelector('.slick-track .widget-title a').text;
   subTitle = item.querySelector('.slick-track .entry-tags ul li a').text;
   content = item.querySelector('.work-cover');

  p1 = document.createElement('p');
  p2 = document.createElement('p');

  t = document.createTextNode(title);
  b = document.createTextNode(subTitle);

  p1.appendChild(t);
  p2.appendChild(b);
  content.appendChild(p1);
  content.appendChild(p2);

}

al colocarlo directamente desde la consola del navegador funciona, pero luego a cargarlo desde el archivo me nuestra el siguiente error

Uncaught TypeError: Cannot read property 'childElementCount' of null

 <div id="dfd-portfolio" class="portfolop-lodging">
  <div class="recent-works-list  slick-initialized slick-slider">
   <div aria-live="polite" class="slick-list draggable">
    <div class="slick-track" role="listbox" style="opacity: 1; width: 1352px; transform: translate3d(0px, 0px, 0px);">
     <div class="recent-works-item project portfolio-hover-style-22 slick-slide slick-current slick-active" data-category=" cabanas"
      data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 338px;">
        <div class="work-cover">
         <div class="entry-thumb">
          <img src="./img/cabaña2-600x550.png" alt="Rancho Paraíso">
          <div class="portfolio-entry-hover">
            <div class="title-wrap">
              <h6 class="widget-title">
                <a href="#" tabindex="0">Rancho Paraíso</a>
              </h6>

              <div class="entry-tags">
                <ul>
                  <li>
                    <a href="#" tabindex="0">Cabañas</a>
                  </li>
                </ul>

              </div>
            </div>
            <a data-rel="prettyPhoto[184015acf55b451e08]" class="zoom-post" href="http://atemajacdebrizuela.com/wp-content/uploads/2018/03/cabaña2.png"
              tabindex="0">
              <i class="dfd-icon-zoom"></i>
            </a>
            <a data-rel="prettyPhoto[iframe]" class="quick-view" href="http://atemajacdebrizuela.com/?my-product=rancho-paraiso?iframe=true&amp;width=100%25&amp;height=100%25"
              tabindex="0">
              <span class="quick-view-text chaffle" data-lang="en">Quick view</span>
            </a>
            <a class="open-post" href="http://atemajacdebrizuela.com/?my-product=rancho-paraiso" tabindex="0">
              <i class="dfd-icon-link"></i>
            </a>
            <a class="plus-link" href="http://atemajacdebrizuela.com/?my-product=rancho-paraiso" tabindex="0">
              <span class="plus-link-container">
                <span class="plus-link-out"></span>
                <span class="plus-link-come"></span>
              </span>
            </a>
            <a class="dfd-dotted-link" href="http://atemajacdebrizuela.com/?my-product=rancho-paraiso" tabindex="0">
              <span class="dfd-left-line"></span>
              <span></span>
              <span class="dfd-right-line"></span>
            </a>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

3
  • 1
    Hola, podrias poner el html que estas contando?. Commented el 12 abr. 2018 a las 13:20
  • Creo que ya se que puede ser tu error, en vez de esta linea let items = document.querySelector('.portfolop-lodging '); , pon esta let items = document.getElementsByClassName('portfolop-lodging'); Commented el 12 abr. 2018 a las 13:23
  • Ya coloque el HTML. voy a probar con la document.getElementsByClassName('portfolop-lodging');
    – develop12
    Commented el 12 abr. 2018 a las 13:34

2 respuestas 2

0

si funciona desde la consola y no desde el html es probablemente porque aún no existe en el DOM el elemento al que apuntas.

Wordpress viene con jQuery precargado, prueba englobar tu javascript en el evento de cuando la página termina de cargar.

$(function(){
   // Aquí el código

});
4
  • No, igual, sigue apareciendo en mismo error
    – develop12
    Commented el 12 abr. 2018 a las 13:52
  • está en un <script></script> justo debajo del </body> ? Commented el 12 abr. 2018 a las 13:55
  • si el js esta al final del body
    – develop12
    Commented el 12 abr. 2018 a las 14:00
  • entonces puede ser el plugin que crea el slider que está fuera de tiempo, prueba este plugin github.com/pie6k/jquery.initialize (se queda esperando que aparezca en el DOM el elemento que le decís y ejecuta una función) Commented el 12 abr. 2018 a las 14:04
0

Probando por ahi tienes que cambiar la linea

let items = document.querySelector('.portfolop-lodging ');

por

var items = document.getElementById('dfd-portfolio').childElementCount;

NOTA: La expresión let es no-estandar por lo tanto hay tener cuidado al usarla.Para mas detalle ver este Sitio.

1
  • de hecho ya no debería usarse. por lo que dice la documentación que puse ahí. Commented el 12 abr. 2018 a las 14:03

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.