Why doesn't handleClick() change the style?

Question

I have a problem with a Stencil.js component. I want to make a image slider with two buttons. When the first button is clicked, the index of the imgs goes -1. When the second button is clicked, it goes +1. I tried to use clickHandler for changing the CSS. The current display of the imgs is set to "none". If I click it should change to block or something like this. But it says "cannot find style". Do I miss sth?

JS Code:

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'outfitslider-nicole',
  styleUrl: 'outfitslider-nicole.css',
  shadow: true
})
export class AppOutfitvorschläge {
  @Prop() Kategorie1: string;
  @Prop() Kategorie2: string;
  @Prop() Kategorie3: string;
  @Prop() Infotext: string; 

  handleClick(event: UIEvent) {

    var imgIndex: number = 1;

    function vorIndex(n: number){
      showingThis(imgIndex += n);
    }

    function showingThis(n: number){
      var i: number;
      var sectors = document.getElementsByClassName("outfit1");

      //beginnt wieder von vorne
      if (n > sectors.length){
        imgIndex = 1;
      }
      //nimmt Länge an
      else if (n < 1){
        imgIndex = sectors.length;
      }

      for(i = 0, i < sectors.length, i++){
        sectors[i].style.display = "none";
      }
      sectors[imgIndex-1].style.display = "block";
    }
  }

  render() {
    return (
      <div class="outfitslider">
        <button id="zurück" onClick={ (event: UIEvent) => this.handleClick(event)}>&laquo;</button>
          <div class="slider-content">
            <ul>
              <li class="outift1">
              <div class="inner-content">
                  <div class="right-content">
                        <h4 class="title">{this.Kategorie1}</h4>
                        <p>{this.Infotext}</p>
                    </div>
                    <div class="left-content">
                      <div class='img'><img src="/assets/L/outfit3.png"></img></div>
                    </div>
                </div>
              </li>
              <li class="outift1">
              <div class="inner-content">
                  <div class="right-content">
                        <h4 class="title">{this.Kategorie2}</h4>
                        <p>{this.Infotext}</p>
                    </div>
                    <div class="left-content">
                      <div class='img'></div>
                    </div>
                </div>
              </li>
              <li class="outift1">
              <div class="inner-content">
                  <div class="right-content">
                        <h4 class="title">{this.Kategorie3}</h4>
                        <p>{this.Infotext}</p>
                    </div>
                    <div class="left-content">
                      <div class='img'></div>
                    </div>
                </div>
              </li>
            </ul>
          </div>
          <button id="weiter">&raquo;</button>
      </div>
    );
  }
}

And my CSS:

.inner-content{
    align-items: center;
    align-self: center;
    max-height: 500px;
    overflow: hidden;
}

.slider-content ul li{
    list-style: none;
    display: none;
}

.title{
    font-size: 15pt;
}

.left-content{
    display: inline-block;
    width: 25%;
    position: relative;
    text-align: left;
    padding: 5px 10px 10px 10px;
    align-self: center;
    margin: 10px 0 10px 0;
    bottom: -50px;
    overflow: hidden;
}
.img{
    background-color: grey;
    height: 300px;
    width: 300px;
    max-width: 300px;
    max-height: 300px;
    align-self: center;
}

.img img{
    height: 300px;
    width: 300px;
    max-width: 300px;
    max-height: 300px;
    align-self: center;
}

.right-content{
    background: whitesmoke;
    display: inline-block;
    max-width: 25%;
    position: relative;
    text-align: left;
    padding: 10px;
    align-self: center;
    margin: 10px 0 10px 0;
}

#weiter {
    max-width: 50px;
    padding: 8px 16px;
    background-color: #BBD6FF;
    color: white;
    font-weight: bold;
    position: absolute;
    left: 76%;
    top: 50%;
    border: none;
    height: 40px;

}

#zurück {
    max-width: 50px;
    padding: 8px 16px;
    background-color: #BBD6FF;
    border: none;
    color: white;
    position: absolute;
    left: 20%;
    top: 50%;
    font-weight: bold;
    height: 40px;
}

score 2 · Answer 1 · answered Apr 26 '20 at 13:38

You're defining the vorIndex function in your handleClick method, but you're never calling it. You're also (re-)setting imgIndex to 1 every time the handler runs. You probably want to store the index as a class member instead.

Furthermore, you're using document.getElementsByClassName("outfit1") in your showingThis function, but this selector won't work because 1) you have a typo in your template (<li class="outift1">) and 2) you won't be able to access the elements inside your component because of the Shadow DOM (you have set shadow: true in your component decorator after all).

There's a few approaches to solve this. To use the DOM API within your component, you could use the @Element decorator to get a reference of the component's host:

@Element() host;

handleClick() {
  const sectors = this.host.shadowRoot.querySelectorAll('.outfit1');
}

Why doesn't handleClick() change the style?

1 Answers1