Creating a function to dynamically assign a class to multiple buttons when a specific button is clicked

Question

Creating a function to dynamically assign a class to multiple buttons when a specific button is clicked

I am working on a nuxt.js web application where I have both static and dynamic buttons. When the static button is clicked, I want to add a specific class to each dynamic button.

Currently, the code I have is able to add the class to the first dynamic button, but it doesn't work on the rest of them. The class gets added dynamically after the first button.

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

Here are the multiple dynamic buttons:

<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 that handles adding the class:

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)
}

The goal is to apply dynamic CSS to each dynamic button when the static button is clicked:

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

javascript vue.js nuxt.js

Answer 1

Answer №1

Since you utilized nuxt.js, I am assuming you are familiar with vue.js.

Include a toggle value in the data section

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

Add class binding to each dynamic button. Use :class="{ glow }" attribute to bind the glow class name when the 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>

Only manipulate the glow data. This will affect each button's class name.

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

Define a timeout ID in data (similar to a global variable in the component). In your initial code, the timeout id scrollTimeout was a local variable in scrollToDiv, making clearTimeout meaningless. Every execution of scrollToDiv creates a new scrollTimenout in the function scope.

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

Answer 2

Since you utilized nuxt.js, I am assuming you are familiar with vue.js.

Include a toggle value in the data section

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

Add class binding to each dynamic button. Use :class="{ glow }" attribute to bind the glow class name when the 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>

Only manipulate the glow data. This will affect each button's class name.

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

Define a timeout ID in data (similar to a global variable in the component). In your initial code, the timeout id scrollTimeout was a local variable in scrollToDiv, making clearTimeout meaningless. Every execution of scrollToDiv creates a new scrollTimenout in the function scope.

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

Answer 3

Answer №2

Each element's ID should be unique, which means that when using getElementById, you will only get the first element that matches. One suggestion is to assign the same class to all three buttons and then use

getElementsByClassName(className)

. This will give you an HTMLCollection that allows you to loop through each element. Here's an example:

activateAnimation() {
  document.getElementById('features').scrollIntoView({
    behavior: 'smooth',
  })
  var elements = document.getElementsByClassName('btn-class')
  for(let e of elements) e.classList.add('animate')
  var animationTimeout
  clearTimeout(animationTimeout)
  animationTimeout = setTimeout(function () {
    for(let e of elements) e.classList.remove('animate')
  }, 2000)
}

Answer 4

Each element's ID should be unique, which means that when using getElementById, you will only get the first element that matches. One suggestion is to assign the same class to all three buttons and then use

getElementsByClassName(className)

. This will give you an HTMLCollection that allows you to loop through each element. Here's an example:

activateAnimation() {
  document.getElementById('features').scrollIntoView({
    behavior: 'smooth',
  })
  var elements = document.getElementsByClassName('btn-class')
  for(let e of elements) e.classList.add('animate')
  var animationTimeout
  clearTimeout(animationTimeout)
  animationTimeout = setTimeout(function () {
    for(let e of elements) e.classList.remove('animate')
  }, 2000)
}

Creating a function to dynamically assign a class to multiple buttons when a specific button is clicked

Answer №1

Answer №2

Similar questions

How to access the onchange text in a react-select search component

looking to save a service or factory as a variable

Is there a way to cross-reference a city obtained from geolocation with the cities stored in my database, and if a match is found, send the corresponding ID

The socket context provider seems to be malfunctioning within the component

Symfony's DataTables is encountering an issue with the JSON response, showing

Using a combination of ASP.NET webpage and JavaScript, a dynamic webpage with a repe

How can I test for equality with an array item using v-if in Vue.js?

Error in connecting Node.js with mongoose

Deleting files in a mongodb collection using node.js

Is there a way to retrieve a single value using AJAX instead of returning the entire HTML page?

`Struggling with managing callbacks, handling errors, and working with MongoDB`

What is the best way to showcase a JSON object in an attractive format on a webpage?

Can you explain the variance between using 'npm i' and 'npm install'?

"Type Error: Attempting to assign a value to a const variable by declaring it as let while importing a variable from another file

Guide to adding a new font to your Ember project

What is the best way to retrieve and utilize various data from a JSON object? Is creating an array necessary for this task?

Update: When a variable changes during onUploadProgress in Vue.js, the DOM is not re

Having trouble with bootstrap carousel malfunctioning on Firefox browser?

Performing a repeated action to choose each item from a dropdown menu

Add a file to the input field using JavaScript and the input type="file"