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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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