How to add dynamic class to multiple dynamic button on click of another button?

Question

I am developing a nuxt.js web application, I have one static button, and multiple dynamic button, on clicking the static button I want to add class to each dynamic button.

With the code below I am able to add class to the button, but it is only working on first button, on remaining button class are getting added dynamically.

<button  @click="scrollToDiv()" class="btn btn-block btn-primary py-2 text-center rounded" style="background: #1f7ae0; border: #1f7ae0;">

below is the multiple dynamic button

<button id="enroll" class="btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
<button id="enroll" class="btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
<button id="enroll" class="btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>

Below is the script

scrollToDiv() {
    document.getElementById('pricing').scrollIntoView({
        behavior: 'smooth',
    })
    var enroll = document.getElementById('enroll')
    enroll.classList.add('glow')
    var scrollTimeout
    clearTimeout(scrollTimeout)
    scrollTimeout = setTimeout(function () {
        enroll.classList.remove('glow')
    }, 2000)
}

I want to add dynamic CSS to each dynamic button on click of static button

.glow {
    color: #fff;
    background: linear-gradient(40deg, #2031ffa1, #05ff75cf) !important;
    border-radius: 12px !important;
    box-shadow: 5px 5px #ff922e !important;
  }

Answer 1

The id of an element is supposed to be unique, so when you use getElementById you are only getting the first matching element. I would try giving the three buttons the same class, and use getElementsByClassName(className) , that will return you an HTMLCollection that will allow you to iterate through the elements. So something like:

scrollToDiv() {
  document.getElementById('pricing').scrollIntoView({
    behavior: 'smooth',
  })
  var elements = document.getElementsByClassName('example-classname')
  for(let e of elements) e.classList.add('glow')
  var scrollTimeout
  clearTimeout(scrollTimeout)
  scrollTimeout = setTimeout(function () {
    for(let e of elements) e.classList.remove('glow')
  }, 2000)
}

Answer 2

As you used nuxt.js, i suppose vue.js solution.

1. append toggle value in data part

  data () {
    return {
      ...
      glow: false,
      ...
    }
  }

2. Add class binding in each dynamic buttons. :class="{ glow }" attributes bind class name glow when glow data is true .

<button id="enroll" class="btn btn-primary btn-block text-center rounded" :class="{glow}" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
<button id="enroll" class="btn btn-primary btn-block text-center rounded" :class="{glow}" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
<button id="enroll" class="btn btn-primary btn-block text-center rounded" :class="{glow}" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>

3. Control just glow data. It affect each button's class name.

scrollToDiv() {
  this.glow = true
  setTimeout(() => {
      this.glow = false
  }, 2000)
}

4. Set timeout id in data (like global variable in component). In your original code, timeout id scrollTimeout is local variable in scrollToDiv , clearTimeout is meaningless. Each execution of scrollToDiv generates new scrollTimenout in function scope.

  data () {
    return {
      ...
      glow: false,
      timer: null,
      ...
    }
  },
...
  methods: {
    ...
    scrollToDiv() {
      this.glow = true
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
          this.glow = false
      }, 2000)
    }
  }
...