AnswerBun.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!

Related Questions

Appending a list in a list using a for loop

2  Asked on November 22, 2021 by syed-ahmed

 

Regular expression to find Specific character in a string

4  Asked on November 22, 2021 by user3061338

       

laravel count records based on each single date

1  Asked on November 22, 2021 by gulzar-ali

       

Change one property in CSS

2  Asked on November 22, 2021 by darek

 

Splitting values in a list and making variables of them

1  Asked on November 22, 2021 by premier12

     

JSX fragment has no corresponding closing tag

1  Asked on November 22, 2021 by chinwe-watkins

   

How to slow down window.location.href on AJAX request

3  Asked on November 22, 2021 by agiftel-longwave

     

Why list initialization disallow narrowing?

0  Asked on November 22, 2021 by alan-jian

   

How can i remove object from nested array?

2  Asked on November 22, 2021 by trajce12

 

How to save model architecture in PyTorch?

3  Asked on November 22, 2021

 

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir