TransWikia.com

Style changing with JS not responding

Stack Overflow Asked by Alessandro on August 14, 2020

I am trying to change style to a component by "classList.add" but for some reasons it is working for the first two element and for all the rest is taking the new class.
Is there any reason why this is happening and how I can work around to fix this issue?
Basically a button in the page has opacity: 0.3, by selecting and answer the button will become active from disable and the opacity should be 1

Thanks
Here my example:

for (let i = 0; i < option.length; i++) {

  [].forEach.call(opts, (el) => {
    el.addEventListener("click", btnClick, false);
  });
  option[i].addEventListener("click", function() {
    // console.log(option[i])
    // console.log('CLICKED') // click on answer
    move.classList.add("active");
    nextSecond.classList.add("active");
    nextThird.classList.add("active");
    nextFour.classList.add("active");
    nextFive.classList.add("active");
    nextSix.classList.add("active");
    nextSeven.classList.add("active");
  });
}

function btnClick() {
  [].forEach.call(opts, (el) => {
    if (el !== this) el.classList.remove("selected");
  });
  this.classList.add("selected");
  $(".next").removeAttr("disabled");
  $(".nextSecond").removeAttr("disabled");
  $(".nextThird").removeAttr("disabled");
  $(".nextFour").removeAttr("disabled");
  $(".nextFive").removeAttr("disabled");
  $(".nextSix").removeAttr("disabled");
  $(".nextSeven").removeAttr("disabled");
}
.btn {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 42px;
  align-items: center;
  text-align: center;
  letter-spacing: 0.05em;
  color: #4BA21C;
  border: 1px solid black;
  width: 220px;
  border-radius: 23px;
  border: 2px solid #4BA21C;
  height: 46px;
  background-color: white;
  &.btn-left {
    margin-left: -56px;
  }
  &:hover {
    cursor: pointer;
  }
  &.back,
  &.next,
  &.nextSecond,
  &.nextThird.ans.active,
  &.nextFour,
  &.nextFive,
  &.nextSix,
  &.nextSeven {
    width: 116px;
  }
  &.back {
    color: #5C5C5C;
    border: 2px solid #5C5C5C;
    background-color: white;
  }
  &.next,
  &.nextSecond,
  &.nextThird,
  &.nextFour,
  &.nextFive,
  &.nextSix,
  &.nextSeven {
    margin-right: 33px;
    opacity: 0.3;
  }
  &.nextFour,
  &.nextFive,
  &.nextSix {
    margin-right: -14px;
  }
}

.active {
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Question Page 3 -->

<div class="questionsPageThree hide">
  <p class="number">3/7</p>
  <div class="second">
    <h1>
      <span>Info</span>mentum
    </h1>
    <p class="hero">
      <span class="start">
                &gt;
            </span> Making change work</p>
  </div>

  <div class="q">
    <div class="left">
      <h2 class="three">3. Do you have someone who you feel comfortable sharing your feelings with?</h2>
    </div>

    <div class="opt">
      <button class="options choosen" type="submit" value="3">
              &check; Yes

            </button>
      <button class="options choosen" type="submit" value="0">
              &#120 No

            </button>
    </div>

    <div class="right">
      <div class="image-right question3"></div>
    </div>
    <section class="q1">
      <button class="btn btn-left back" value="BACK" type="button">
                BACK
            </button>
      <button class="btn btn-right nextThird ans" value="NEXT" type="button" disabled="disabled">
                NEXT
            </button>
    </section>
  </div>
</div>

<!-- Question Page 4 -->

<div class="questionsPageFour hide">
  <p class="number">4/7</p>
  <div class="second">
    <h1>
      <span>Info</span>mentum
    </h1>
    <p class="hero">
      <span class="start">
                &gt;
            </span> Making change work</p>
  </div>

  <div class="q">
    <div class="left">
      <h2>4. How many times this week would you say you felt stressed to the point of worry?</h2>
    </div>

    <div class="opt">
      <button class="options choosen" type="submit" value="3">
                <h4> 0</h4>
                <h6>TIMES</h6>
            </button>
      <button class="options choosen" type="submit" value="0">
                <h4>1 - 2</h4>
                <h6>TIMES</h6>
            </button>
      <button class="options choosen" type="submit" value="-2">
                <h4>3 + </h4>
                <h6>TIMES</h6>
            </button>
    </div>

    <div class="right">
      <div class="image-right question4"></div>
    </div>
    <section class="q1">
      <button class="btn btn-left back" value="BACK" type="button">
                BACK
            </button>
      <button class="btn btn-right nextFour ans" value="NEXT" type="button" disabled="disabled">
                NEXT
            </button>
    </section>
  </div>
</div>

javascript html jquery css class

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP