CODEWITHSUNDEEP
javascripthtmldom
Michael Lester
Michael Lester

Reputation: 125

Function 'onclick' works only once

I'm struggling with the issue of onclick function and replacing html in DOM. The function is responsible for: 1. reading the whole list from the DOM, 2. changing its order accordingly to ID I get from click, and then displaying it as a new list.

Unfortunately, this function works only once and then stops. Would apreciate any advise.

class Slider {
  constructor() {
    this.settings = { center: 3 };
    this.container = document.getElementsByClassName('slider__container');
    this.slides = this.container[0].querySelectorAll('.slider__card');
    this.currentSlide = '';
    this.onSlideClick();
  }

  onSlideClick() {
    this.slides.forEach(slide => {
      return slide.addEventListener('click', () => {
        this.currentSlide = parseInt(slide.dataset.slideId);
        this.createNewList(this.currentSlide);
      });
    });
  }

  createNewList(curr) {
    const { center } = this.settings;
    const { slides } = this;
    let nodeList = '';
    let newList = [];
    let diff = curr - center;

    for (let i = 0; i < slides.length; i++) {
      if (i + diff < 0) newList.push(slides[i + curr + center - 1]);
      else newList.push(slides[(i + diff) % 5]);
    }

    newList.forEach(item => (nodeList = nodeList + item.outerHTML));
    this.container[0].innerHTML = nodeList;
    nodeList = '';
    newList = [];
    console.log('done');
  }
}

export default Slider;

index.html

    <ul class="slider__container">
      <!-- 1 slide -->
      <li class="slider__card slider__margin-t--1" data-slide-id="1">
        <div class="slider__card-pic">
          <img class="shape__x-small shape--rotate-10 shape--absolute slider__polygon" src="./images/shape-polygon-violet.svg" alt="Polygon Shape">
          <img class="shape--absolute slider__icon" src="./images/icon-note.svg" alt="Note and pen">
        </div>
        <div class="slider__card-text">
          <h3>Excepteur sint occaecat</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus debitis laboriosam ea, magni nulla libero.</p>
        </div>
      </li>
      <!-- 2 slide -->
      <li class="slider__card slider__margin-t--2" data-slide-id="2">
        <div class="slider__card-pic">
          <img class="shape__x-small shape--rotate-10 shape--absolute slider__polygon" src="./images/shape-polygon-violet.svg" alt="Polygon Shape">
          <img class="shape--absolute slider__icon" src="./images/icon-chart.svg" alt="Chart panel">
        </div>
        <div class="slider__card-text">
          <h3>Doloribus eum</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus debitis laboriosam ea, magni nulla libero.</p>
        </div>
      </li>
      <!-- 3 slide -->
      <li class="slider__card slider__margin-t--3" data-slide-id="3">
        <div class="slider__card-pic">
          <img class="shape__x-small shape--rotate-10 shape--absolute slider__polygon" src="./images/shape-polygon-violet.svg" alt="Polygon Shape">
          <img class="shape--absolute slider__icon" src="./images/icon-settings.svg" alt="Settings panel">
        </div>
        <div class="slider__card-text">
          <h3>Debitis omnis asperiores</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus debitis laboriosam ea, magni nulla libero.</p>
        </div>
      </li>
      <!-- 4 slide -->
      <li class="slider__card slider__margin-t--4" data-slide-id="4">
        <div class="slider__card-pic">
          <img class="shape__x-small shape--rotate-10 shape--absolute slider__polygon" src="./images/shape-polygon-violet.svg" alt="Polygon Shape">
          <img class="shape--absolute slider__icon" src="./images/icon-thunder.svg" alt="Thunder">
        </div>
        <div class="slider__card-text">
          <h3>Asperiores impedit obcaecati</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus debitis laboriosam ea, magni nulla libero.</p>
        </div>
      </li>
      <!-- 5 slide -->
      <li class="slider__card slider__margin-t--5" data-slide-id="5">
        <div class="slider__card-pic">
          <img class="shape__x-small shape--rotate-10 shape--absolute slider__polygon" src="./images/shape-polygon-violet.svg" alt="Polygon Shape">
          <img class="shape--absolute slider__icon" src="./images/icon-play.svg" alt="Thunder">
        </div>
        <div class="slider__card-text">
          <h3>Temporary </h3>
          <p>Lorem ipsum dolor sit amet, elit. Minus debitis laboriosam ea, magni nulla libero.</p>
        </div>
      </li>
    </ul>

Upvotes: 2

Views: 149

Answers (1)

An0num0us
An0num0us

Reputation: 961

I guess it's because of this line

this.container[0].innerHTML = nodeList;

You replace old elements with new ones which do not have any listeners attached.

You could append the listener to the parent element and use e.target to refer to the particular child element.

Upvotes: 6

Related Questions