Combine multiple similar JavaScript functions into one

Question

I'm creating an extension that requires copying to clipboard, but I don't want to have 18 different functions that do (pretty much) the exact same thing.

This is the function that I wrote:

function copyS1_1() {
    var letter_to_copy = document.getElementById('textarea-S1-1');
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}
function copyS1_2() {
    var letter_to_copy = document.getElementById('textarea-S1-2');
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}

Each function is called 'copyS#_#' for 'Section' then the number in that section. I don't want to have 18 of these, so I'm looking for a way to simplify it down to 3 functions (one for each Section, there's 3.)

Use function arguments. Declare the element id (or the two #s) as a parameter. — Bergi
– Bergi, Commented Jan 15, 2022 at 18:10
"simplify it down to 3 functions" - why not go the full way down to just 1 function? — Bergi
– Bergi, Commented Jan 15, 2022 at 18:11
@Bergi I could, and it would be better, but I didn't know how to go about doing it to begin with, so I just said something that seemed like it might be easier, and in what Cam said, I would be using 3 functions, but seeing how Cam did it, I can simplify it down to 1 function. — jasonhe
– jasonhe, Commented Jan 15, 2022 at 18:13

sean-7777 · Accepted Answer · 2022-01-15 18:12:06Z

2

You can do this with template literals and function arguments.

function copyFuncForAny(num1, num2) {
    var letter_to_copy = document.getElementById(`textarea-S${num1}-${num2}`);
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}

copyFuncForAny(1, 1);
copyFuncForAny(1, 2);

answered Jan 15, 2022 at 18:12

sean-7777

6875 silver badges14 bronze badges

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

Comments

Cam · Accepted Answer · 2022-01-15 18:11:24Z

0

You could add a parameter:

function copyS1(id) {
    var letter_to_copy = document.getElementById('textarea-S1-' + id);
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}

Use like this:

copyS1(1)
copyS1(2)
...

answered Jan 15, 2022 at 18:11

Cam

15.3k16 gold badges81 silver badges131 bronze badges

3 Comments

jasonhe Over a year ago

so I actually tried this, but I think because I'm using document.getElementById('Sec1_BTN1').addEventListener('click', copyS1(1)); with your suggestion, it's triggering the event on page load. Any ideas?

Cam Over a year ago

@jasonhe Yes! As you know, the second parameter to addEventListener is the function you want JS to run when the event happens. The problem with your code: JS thinks the function you want it to run is undefined, because copyS1(1), which is run as soon as you call addEventListener, evaluates to undefined. What you actually want is this: document.getElementById('Sec1_BTN1').addEventListener('click', function() { copyS1(1) }); That works because function() { copyS1(1) } evaluates to a function

Cam Over a year ago

Another way to do this would be with "bind" — see developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… for background. But the code would look like this: document.getElementById('Sec1_BTN1').addEventListener('click', copyS1.bind(null, 1));. It works because copyS1.bind(null, 1) evaluates as "a function which calls copyS1(1)".

Mubasher Ali · Accepted Answer · 2022-01-15 18:12:12Z

0

its simple just your own function like this

function copyText(id) {
    var letter_to_copy = document.getElementById(id);
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}

use it as many time as you want.

answered Jan 15, 2022 at 18:12

Mubasher Ali

5426 silver badges14 bronze badges

Comments

Lukas Schneider · Accepted Answer · 2022-01-15 18:12:32Z

0

Why don't you simply pass the string as an argument?

function copyS1_1(id) {
  var letter_to_copy = document.getElementById(id);
  letter_to_copy.select();
  navigator.clipboard.writeText(letter_to_copy.value);
}

answered Jan 15, 2022 at 18:12

Lukas Schneider

1465 bronze badges

Comments

ndotie · Accepted Answer · 2022-01-15 18:13:16Z

0

textarea-S1-1 its only changing value here, so you can pass it as paramater to a general function

function copyS1(textarea) {
    var letter_to_copy = document.getElementById(textarea);
    letter_to_copy.select();
    navigator.clipboard.writeText(letter_to_copy.value);
}

and use it as follow

var copyS1_1 = copyS1('textarea-S1-1')
var copyS1_2 = copyS1('textarea-S1-2')

answered Jan 15, 2022 at 18:13

ndotie

2,19021 silver badges21 bronze badges

Collectives™ on Stack Overflow

Combine multiple similar JavaScript functions into one

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related