Question 44645 in Html Question posted in
Some basic documentation can be found here.

Looping JavaScript function, shortened redundant JS code – Html

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>
Tags:

2

Answers


  1. 0 
     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');
    });
})
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search