Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

175
Views
How to use same funtion for 2 different variable

Have to use same function with two different variable with querySelector attached to the variable. Following is the javascript.

var productLink = document.querySelector('.products-link');
var productOffcanvas = document.getElementById('offcanvasProducts')

productOffcanvas.addEventListener('show.bs.offcanvas', function () {
    element.classList.toggle('active');
})
productOffcanvas.addEventListener('hide.bs.offcanvas', function () {
    productLink.classList.toggle('active');
})


var solutionsLink = document.querySelector('.solutions-link');
var solutionsOffcanvas = document.getElementById('offcanvasSolutions')

solutionsOffcanvas.addEventListener('show.bs.offcanvas', function () {
    solutionsLink.classList.toggle('active');
})
solutionsOffcanvas.addEventListener('hide.bs.offcanvas', function () {
    solutionsLink.classList.toggle('active');
})
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

You can use same listner for both function and differentatie them with their class names.

const productLink = document.querySelector('.products-link');
const productOffcanvas = document.getElementById('offcanvasProducts');

productOffcanvas.addEventListener('show.bs.offcanvas', showOffCanvas);
productOffcanvas.addEventListener('hide.bs.offcanvas', hideOffCanvas);

const solutionsLink = document.querySelector('.solutions-link');
const solutionsOffcanvas = document.getElementById('offcanvasSolutions')

solutionsOffcanvas.addEventListener('show.bs.offcanvas', showOffCanvas);
solutionsOffcanvas.addEventListener('hide.bs.offcanvas', hideOffCanvas);

function showOffCanvas(e) {
    const classList = e.target.classList;
    if(classList.contains('products-link')) {
        productLink.classList.toggle('active');
    } else {
        solutionsLink.classList.toggle('active');
    }
}

function hideOffCanvas(e) {
    const classList = e.target.classList;
    if(classList.contains('products-link')) {
        productLink.classList.toggle('active');
    } else {
        solutionsLink.classList.toggle('active');
    }
}

about 4 years ago · Juan Pablo Isaza Report

0

Using a function which returns a function:

function func(link) {
    return () => link.classList.toggle('active');
}

Then:

productOffcanvas.addEventListener('show.bs.offcanvas', func(element));

productOffcanvas.addEventListener('hide.bs.offcanvas', func(productLink));

solutionsOffcanvas.addEventListener('show.bs.offcanvas', func(solutionsLink));

solutionsOffcanvas.addEventListener('hide.bs.offcanvas', func(solutionsLink));
about 4 years ago · Juan Pablo Isaza Report

0

You can use like:

function toggleCanvasVisibility(targetElement, el) {
  targetElement.addEventListener('show.bs.offcanvas', function () {
    el.classList.toggle('active');
  })
  targetElement.addEventListener('hide.bs.offcanvas', function () {
    el.classList.toggle('active');
  })
}

function findAndRegisterCanvasVisibility(canvasId, targetClass) {
  const element = document.querySelector(targetClass);
  const canvasElement = document.getElementById(canvasId);
  toggleCanvasVisibility(canvasElement, element);
}

// for product link

findAndRegisterCanvasVisibility('offcanvasProducts', '.products-link');


// for solutions

findAndRegisterCanvasVisibility('offcanvasSolutions', '.solutions-link');
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!