Add text to carousel with js

2

I have a corrusel carousel

I want, I have programmed the next js to get its value and then add them under the image with a <p></p> tag

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);

}

when placing it directly from the browser console works, but then to load it from the file I get the following 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>

    
asked by develop12 12.04.2018 в 15:13
source

2 answers

0

if it works from the console and not from the html it is probably because the element you are targeting does not yet exist in the DOM.

Wordpress comes with jQuery preloaded, try to include your javascript in the event of when the page finishes loading.

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

});
    
answered by 12.04.2018 в 15:44
0

Trying out there you have to change the line

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

for

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

NOTE: The expression let is non-standard therefore you must be careful when using it. For more details see this Site .

    
answered by 12.04.2018 в 15:56