Bollate

HTML

[ANSWERED] javascript – Uncaught TypeError: Cannot read properties of null (reading ‘classList’) after one click or auto-scroll in the multi-carousel

By

Nov 18, 2022 , , , ,

Solution 1 :

I included the scripts inside the HTML content and it is working perfectly as per the example. I think you have something missing inside your HTML DOM tree which makes your code stop here Uncaught TypeError: Cannot read properties of null (reading 'classList')

It is possibly a closing div and therefore this is why your carousel.js breaks and doesn’t continue on the next slide. From debugging a bit, I actually found it but in order to access the property of classList you had to put it like this classList[0]which normally isn’t supposed to have this structure. It has to be just plain classList.remove(YOUR_CLASS)

You should set a breakpoint here inside this folder in order to get the info you actually need.
enter image description here

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.js"></script>


<div class="container my-5">

  <!-- Section: Introduction -->
  <section class="">

    <p>Free example of carousel with multiple items built with the newest Bootstrap 5. Learn how to create a responsive carousel with many items inside.</p>

    <p>
      Detailed documentation and more examples you can find in our
      <a href="https://mdbootstrap.com/docs/standard/components/carousel/" target="_blank"><strong>Carousel Docs</strong></a>.
    </p>
    <p>See also <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced mutli item carousel plugin</strong></a>.</p>


    <hr class="mt-5">

    <p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>

    <a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>
    <a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
    <a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
    <a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>

    <hr class="mb-5"/>

  </section>
  <!-- Section: Introduction -->

  <!-- Section: Basic example -->
  <section class="">

    <p><strong>Basic example</strong></p>

    <div class="container my-5">
      <!-- Carousel wrapper -->
      <div
           id="carouselBasicExample"
           class="carousel slide carousel-dark text-center"
           data-mdb-ride="carousel"
           >
        <!-- Controls -->
        <div class="d-flex justify-content-center mb-4">
          <button
                  class="carousel-control-prev position-relative"
                  type="button"
                  data-mdb-target="#carouselBasicExample"
                  data-mdb-slide="prev"
                  >
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button
                  class="carousel-control-next position-relative"
                  type="button"
                  data-mdb-target="#carouselBasicExample"
                  data-mdb-slide="next"
                  >
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
        <!-- Inner -->
        <div class="carousel-inner py-4">
          <!-- Single item -->
          <div class="carousel-item active">
            <div class="container">
              <div class="row">
                <div class="col-lg-4">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/181.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/182.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/183.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Single item -->
          <div class="carousel-item">
            <div class="container">
              <div class="row">
                <div class="col-lg-4 col-md-12">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/185.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/186.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Single item -->
          <div class="carousel-item">
            <div class="container">
              <div class="row">
                <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/187.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/188.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/189.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      <!-- Carousel wrapper -->
    </div>
     <!-- Controls -->
        <div class="d-flex mb-4">
          <button
                  class="carousel-control-prev justify-content-start"
                  type="button"
                  data-mdb-target="#carouselBasicExample"
                  data-mdb-slide="prev"
                  >
            <span class="carousel-control-prev-icon" aria-hidden="true">b</span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button
                  class="carousel-control-next justify-content-end"
                  type="button"
                  data-mdb-target="#carouselBasicExample"
                  data-mdb-slide="next"
                  >
            <span class="carousel-control-next-icon" aria-hidden="true">a</span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>

  </section>
  <!-- Section: Basic example -->
</div>

Solution 2 :

Not sure if you ever found a solution to this, but I think I did. Changing the data-target and data-slide-to to data-bs-target and data-bs-slide-to fixed this null dereference error. It’d be nice if Bootstrap put a null error check in there with a useful message.

<div class="carousel-indicators">
    <button data-bs-target="#homeCarouselControls" data-bs-slide-to="0" class="active"></button>
    <button data-bs-target="#homeCarouselControls" data-bs-slide-to="1"></button>              
</div>

Problem :

So I’ve been following the official tutorial here and I require a slide indicator here as well so I just copied and modified the code from this example here.

My markup looks like this:

<div class="container my-5">

  <!-- Section: Introduction -->
  <section class="">

    <p>Free example of carousel with multiple items built with the newest Bootstrap 5. Learn how to create a responsive carousel with many items inside.</p>

    <p>
      Detailed documentation and more examples you can find in our
      <a href="https://mdbootstrap.com/docs/standard/components/carousel/" target="_blank"><strong>Carousel Docs</strong></a>.
    </p>
    <p>See also <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced mutli item carousel plugin</strong></a>.</p>


    <hr class="mt-5">

    <p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>

    <a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>
    <a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
    <a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
    <a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>

    <hr class="mb-5"/>

  </section>
  <!-- Section: Introduction -->

  <!-- Section: Basic example -->
  <section class="">

    <p><strong>Basic example</strong></p>

    <div class="container my-5">
      <!-- Carousel wrapper -->
      <div
           id="carouselBasicExample"
           class="carousel slide carousel-dark text-center carousel-multi-item"
           data-ride="carousel"
           data-mdb-ride="carousel"
           >
       
        <!-- Inner -->
        <div class="carousel-inner py-4">
            <ol class="carousel-indicators">
      <li data-target="#carouselBasicExample" data-slide-to="0" class="active"></li>
      <li data-target="#carouselBasicExample" data-slide-to="1"></li>
      <li data-target="#carouselBasicExample" data-slide-to="2"></li>
      <li data-target="#carouselBasicExample" data-slide-to="3"></li>
      <li data-target="#carouselBasicExample" data-slide-to="4"></li>
      <li data-target="#carouselBasicExample" data-slide-to="5"></li>
    </ol>
          <!-- Single item -->
          <div class="carousel-item active">
            <div class="container">
              <div class="row">
                <div class="col-lg-4">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/181.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/182.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/183.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Single item -->
          <div class="carousel-item">
            <div class="container">
              <div class="row">
                <div class="col-lg-4 col-md-12">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.daoisjoifjoidsafpijsadpoj
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/185.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/186.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Single item -->
          <div class="carousel-item">
            <div class="container">
              <div class="row">
                <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/187.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/188.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
                  <div class="card">
                    <img
                         src="https://mdbootstrap.com/img/new/standard/nature/189.jpg"
                         class="card-img-top"
                         alt="..."
                         />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">
                        Some quick example text to build on the card title and
                        make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary">Button</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Inner -->
      </div>
      <!-- Carousel wrapper -->
    </div>
     <!-- Controls -->
        <div class="d-flex mb-4">
          <button
                  class="carousel-control-prev justify-content-start"
                  type="button"
                  data-mdb-target="#carouselBasicExample"
                  data-mdb-slide="prev"
                  >
            <span class="carousel-control-prev-icon" aria-hidden="true">b</span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button
                  class="carousel-control-next justify-content-end"
                  type="button"
                  data-mdb-target="#carouselBasicExample"
                  data-mdb-slide="next"
                  >
            <span class="carousel-control-next-icon" aria-hidden="true">a</span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>

  </section>
  <!-- Section: Basic example -->
</div>

But it fails with the error Uncaught TypeError: Cannot read properties of null (reading 'classList') after one click/one auto scroll. It doesn’t throw any errors or work when you click even more on it, weird…

  • Also, don’t I need to have two different versions – one for mobile and one for desktop for the indicators, since there will be different amounts due to the fact that the mobile view displays only a single slide?

The official documentation (API) is here but it didn’t help me: https://mdbootstrap.com/docs/standard/components/carousel/#docsTabsAPI

Comments

Comment posted by Munchkin

How do I attach the debugger properly to detect scope errors (which appears to be the case here)?

Comment posted by Oris Sin

You can check on my editted post.

By

Related Post

HTML

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022
HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022
HTML

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022