1

I have some HTML that has the same section repeated a few times, I am trying to get the array of sections to print out in console.log in the JavaScript bellow.

I cant see where I have gone wrong and I get a console error on click of close of

wrapper.getElementsByClassName is not a function

Can anyone help me get this cosole.log to print the amount of arrays please.

JavaScript

_bindShowLess = function () {
        var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
        // Not working

        // End not working
        _showLess.on('click', function () {

            var wrapper = document.getElementsByClassName('sectorpage-strengths');
            var div = wrapper.getElementsByClassName('container');
            var section = [];

            for (i = 0; i < div.length; i++) {
                section[i] = div[i].getElementsByClassName('sectorpage-strengths-list');
            }
            console.log(section);
            // Removed to stop onscroll to parent div

            $('html, body').animate({
                scrollTop: _sectorPageStrengths.offset().top
            }, 700);


            // End

        });
    };

HTML

<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
        <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h2>
                            Commercial Services
                        </h2>
                    </div>
                </div>
            <div class="row sectorpage-strengths-list">
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Datamonitor Healthcare </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Biomedtracker </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Medtrack </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=350&amp;la=en-US&amp;hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Strategic Transactions </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
            </div>


                <div class="row view-all-sectors-btn-container">
                    <span class="center-block view-all-sectors-btn text-center more" role="button">
                        View more
                        <br>
                        <em class="informa-icon glyphicon glyphicon-plus-sign"></em>
                    </span>
                    <span class="center-block view-all-sectors-btn text-center less" role="button">
                        View Less
                        <br>
                        <em class="informa-icon glyphicon glyphicon-minus-sign"></em>
                    </span>
                </div>
        </div>
    </section>
Beep
  • 2,737
  • 7
  • 36
  • 85
  • `getElementsByClassName` can be called on Elements, but `wrapper` is a NodeList that *contains* Elements, not an Element itself. – Quentin Nov 13 '18 at 12:04
  • 1
    You've tagged this question jQuery and are using jQuery in other parts of the code, so I'm not sure why you are using raw DOM for this (and if you want to use raw DOM, I don't know why you wouldn't use `querySelectorAll`) – Quentin Nov 13 '18 at 12:04

2 Answers2

1

wrapper is a collection in your code.

Instead of 

var wrapper = document.getElementsByClassName('sectorpage-strengths');

Try

var wrapper = document.getElementById('sectorpage-strengths');

Also your i variable is not defined, So instead of

for (i = 0; i < div.length; i++) { // ...

Try

for (var i = 0; i < div.length; i++) { // ...
qiAlex
  • 4,290
  • 2
  • 19
  • 35
0

When you are using jquery you can use jquery class selector, If you want to use document.getElementsByClass you need to get the element by passing index. Also you will like to push values in the section array ike this

section.push(div[i].find('.sectorpage-strengths-list'));


_bindShowLess = function() {
  var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
  // Not working

  // End not working
  _showLess.on('click', function() {

    var wrapper = $('#sectorpage-strengths');
    var div = wrapper.find('.container');
    var section = [];

    for (let i = 0; i < div.length; i++) {
      section.push(div[i].find('.sectorpage-strengths-list'));
    }
    console.log(section);
    // Removed to stop onscroll to parent div

    $('html, body').animate({
      scrollTop: _sectorPageStrengths.offset().top
    }, 700);


    // End

  });
};
<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h2>
          Commercial Services
        </h2>
      </div>
    </div>
    <div class="row sectorpage-strengths-list">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container" style="height: 0px;">

            <img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
            <div class="yellow-container" style="height: 80px;">
              <h3>Datamonitor Healthcare </h3>
            </div>

          </div>
          <div class="wrap">
            <div class="text-description" style="height: 145px;">
              <span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
              <br style="color: #565c6b; background-color: #ffffff;">
              <span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
            </div>
            <div class="slant"></div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container" style="height: 0px;">

            <img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
            <div class="yellow-container" style="height: 80px;">
              <h3>Biomedtracker </h3>
            </div>

          </div>
          <div class="wrap">
            <div class="text-description" style="height: 145px;">
              <span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
              <br style="color: #565c6b; background-color: #ffffff;">
              <span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
            </div>
            <div class="slant"></div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container" style="height: 0px;">

            <img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">
            <div class="yellow-container" style="height: 80px;">
              <h3>Medtrack </h3>
            </div>

          </div>
          <div class="wrap">
            <div class="text-description" style="height: 145px;">
              <span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
              <br style="color: #565c6b; background-color: #ffffff;">
              <span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
            </div>
            <div class="slant"></div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container" style="height: 0px;">

            <img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=350&amp;la=en-US&amp;hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" ">
            <div class="yellow-container" style="height: 80px;">
              <h3>Strategic Transactions </h3>
            </div>

          </div>
          <div class="wrap">
            <div class="text-description" style="height: 145px;">
              <span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
              <br style="color: #565c6b; background-color: #ffffff;">
              <span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
            </div>
            <div class="slant"></div>
          </div>
        </div>
      </div>
    </div>


    <div class="row view-all-sectors-btn-container">
      <span class="center-block view-all-sectors-btn text-center more" role="button">
                        View more
                        <br>
                        <em class="informa-icon glyphicon glyphicon-plus-sign"></em>
                    </span>
      <span class="center-block view-all-sectors-btn text-center less" role="button">
                        View Less
                        <br>
                        <em class="informa-icon glyphicon glyphicon-minus-sign"></em>
                    </span>
    </div>
  </div>
</section>
brk
  • 48,835
  • 10
  • 56
  • 78
  • Hmm this looks like the better solution however TypeError: n[t].find is not a function – Beep Nov 13 '18 at 14:41