Avoiding duplicate code in JavaScript function

Question

I am using Stripe Checkout on my website and I use several buttons to open the checkout popup. I am now basically using the exact same code twice besides changing the id. Is there a way to combine this into one function?

document.getElementById('buyCourseButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Company name', // TODO
    description: 'Product description', // TODO
    currency: 'eur',
    amount: '{{ course_price }}'
  });
  e.preventDefault();
});

document.getElementById('buyCourseButton2').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Company name', // TODO
    description: 'Product description', // TODO
    currency: 'eur',
    amount: '{{ course_price }}'
  });
  e.preventDefault();
});

so make it a function and bind the function to the clicks ('click', yourFunction) — epascarello
– epascarello, Commented Aug 29, 2018 at 15:59
I tried that, and called the function, but Stripe didn't accept that and showed me an error with Invalid source object: must be a dictionary or a non-empty string. — user9252255
– user9252255, Commented Aug 29, 2018 at 16:01
Show us what you did when you attempted to use a single function. — Chris
– Chris, Commented Aug 29, 2018 at 16:04

brk · Accepted Answer · 2018-08-29 16:18:31Z

2

You can use jquery-multiple-selector

const handler = {
  open: a => console.log(a)
};
$('#buyCourseButton1,#buyCourseButton2').click(function(e) {
  handler.open({
    name: 'Company name', // TODO
    description: 'Product description', // TODO
    currency: 'eur',
    amount: '{{ course_price }}'
  });
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="buyCourseButton1">Button one</button>
<button id="buyCourseButton2">Button two</button>

answered Aug 29, 2018 at 16:18

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user9252255 Over a year ago

Ironically it even works that way when I give every button the same id. But as soon I remove ,#buyCourseButton2 it doesn't work anymore. Do you see any logic in this behaviour?

brk Over a year ago

In a dom id must be unique, having duplicate id is surely anti pattern and not acceptable

Luca Kiebel · Accepted Answer · 2018-08-29 16:01:53Z

0

Give the buttons a class and use make an array from getElementsByClassName:

const handler = {
  open: a => console.log(a)
};

Array.from(document.getElementsByClassName('buyCourseButton')).forEach(function(button) {
  button.addEventListener('click', function(e) {
    // Open Checkout with further options:
    handler.open({
      name: 'Company name', // TODO
      description: 'Product description', // TODO
      currency: 'eur',
      amount: '{{ course_price }}'
    });
    e.preventDefault();
  });

});

<button class="buyCourseButton">Button one</button>
<button class="buyCourseButton">Button two</button>

answered Aug 29, 2018 at 16:01

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

3 Comments

user9252255 Over a year ago

Class didn't work, unfortunately, but the jquery-multiple-selector solved it.

Luca Kiebel Over a year ago

Class won't work unless you give the buttons a class of course

user9252255 Over a year ago

I changed them to class when trying it. But it seems Stripe doesn't accept this.

Collectives™ on Stack Overflow

Avoiding duplicate code in JavaScript function

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related