title: Unable To Permanently Increase The Position Property of My Custom Slider
body: <p>I am designing a Slider component which keeps track of the current <code>position</code> of its contents so it can properly display the current slide. It seems like I'm hard stuck with a simple problem, the <code>position</code> remains the same. I don't get what is the problem, since the <code>position</code> is defined as a property of the class. So it's outside the function that increments the <code>position</code>. I am also using a lambda expression, which shouldn't have any problem with referencing the property.</p>
  <pre><code>updateControls(value) {
      let position = parseInt(this.position);
  
      if (value === &quot;auto&quot;) {
          let content = undefined;
          let display = undefined;
  
          Array.from(this.children).forEach((child) =&gt; {
              if (child.className !== &quot;left-control&quot; &amp;&amp;
                  child.className !== &quot;right-control&quot;) {
                      content = child;
                      display = window.getComputedStyle(content)
                                      .getPropertyValue(&quot;display&quot;);
                  }
          });
  
          if (display === &quot;flex&quot;) {
              content.style.display = &quot;inline-flex&quot;;
          }
  
          else {
              content.style.display = &quot;inline-block&quot;;
          }
  
          this.style.display = &quot;flex&quot;;
      }
  
      if (!this.prev) {
          this.prev = document.createElement(&quot;button&quot;);
  
          this.prev.id = &quot;prev&quot;;
          this.prev.className = &quot;left-control&quot;;
          this.prev.textContent = this.prev.id;
  
          this.prev.addEventListener(&quot;click&quot;, () =&gt; {
                  console.log(position);
                  this.position = (position).toString();
              }
          );
      }
  
      if (!this.next) {
          this.next = document.createElement(&quot;button&quot;);
  
          this.next.id = &quot;next&quot;;
          this.next.className = &quot;right-control&quot;;
          this.next.textContent = this.next.id;
  
          this.next.addEventListener(&quot;click&quot;, () =&gt; {
                  console.log(position);
                  this.position = (position + 1).toString();
              }
          );
      }
  
      if (position === 0) {
          if (document.querySelector(`#${this.prev.id}`)) {
              this.prev.remove();
          }
  
          if (document.querySelector(`#${this.next.id}`)) {
              this.next.remove();
          }
  
          this.appendChild(this.next);
      }
  
      if (position &gt; 0 &amp;&amp; position &lt; (this.slides.size)) {
          if (document.querySelector(`#${this.prev.id}`)) {
              this.prev.remove();
          }
  
          if (document.querySelector(`#${this.next.id}`)) {
              this.next.remove();
          }
  
          this.appendChild(this.prev);
          this.appendChild(this.next);
      }
  
  }
  </code></pre>