Looping JavaScript function, shortened redundant JS code

Question

I have this JS to copy each text in its respective textareas. Currently I have 3 textareas and 3 copy buttons, with 3 separate JS functions. How do I shorten my JS code?

var copyTextareaBtn0 = document.querySelector('.btn0');
var copyTextareaBtn1 = document.querySelector('.btn1');
var copyTextareaBtn2 = document.querySelector('.btn2');

copyTextareaBtn0.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.text0');
  copyTextarea.focus();
  copyTextarea.select();
  
  var successful = document.execCommand('copy');
});

copyTextareaBtn1.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.text1');
  copyTextarea.focus();
  copyTextarea.select();
  
  var successful = document.execCommand('copy');
});

copyTextareaBtn2.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.text2');
  copyTextarea.focus();
  copyTextarea.select();

  var successful = document.execCommand('copy');
});

<textarea class="box text0" id="text0">Text 1</textarea>
<button class="btn0" style="vertical-align:top;">Copy</button>

<textarea class="box text1" id="text1">Text 2</textarea>
<button class="btn1" style="vertical-align:top;">Copy</button>

<textarea class="box text2" id="text2">Text 3</textarea>
<button class="btn2" style="vertical-align:top;">Copy</button>

Take a look at [event delegation](https://stackoverflow.com/q/1687296/1169519). — Teemu, Mar 02 '23 at 08:08

Enes Toprak · Accepted Answer · 2023-03-02T08:26:33.913

 for (let i = 0; i < 3; i++) {
        let copyTextareaBtn = document.querySelector(`.btn${i}`);
        copyTextareaBtn.addEventListener('click', function(event) {
            var copyTextarea = document.querySelector(`.text${i}`);
            copyTextarea.focus();
            copyTextarea.select();
            var successful = document.execCommand('copy');
        });
    }

You could use a structure like this. Or in html you can do it as follows by enclosing the elements in a div.

document.querySelector("div").querySelectorAll("button").forEach((btn, index) => {
    btn.addEventListener('click', function(event) {
        var copyTextarea = document.querySelector(`.text${index}`);
        copyTextarea.focus();
        copyTextarea.select();
        var successful = document.execCommand('copy');
    });
})

score 0 · Answer 2 · answered Mar 02 '23 at 08:29

You could loop through all elements and add listeners to every element

this.parentNode to get the parent of the clicked button.

parent.querySelector('.text') : to select the child(text area)

var elements = document.getElementsByClassName("btn");
var myFunction = function() {
    var parent =  this.parentNode;
    var copyTextarea = parent.querySelector('.text');
    copyTextarea.focus();
    copyTextarea.select();
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

<div class='textArea 1'>
  <textarea class="box text">Text 1</textarea>
  <button class="btn" style="vertical-align:top;">Copy</button>
</div>
<div class='textArea 2'>
  <textarea class="box text">Text 2</textarea>
  <button class="btn" style="vertical-align:top;">Copy</button>
</div>
<div class='textArea 3'>
  <textarea class="box text">Text 3</textarea>
  <button class="btn" style="vertical-align:top;">Copy</button>
</div>

Looping JavaScript function, shortened redundant JS code

2 Answers2