javascript - How to trigger a file download with text area content when clicking an HTML button

Solution:

• firstly you are selected all textarea bySelectorAll then generated the link without loop through it
• also even if you done a loop that's will generate link for all textarea elements
• if you want to download the textarea before clicked button it's will be better to add them inside acontainer and usethis keyword
• or usepervouisSibling
• also it's will be better to use css instead ofbr tag
• you don't need jQuery because your function already uses Vanillajs

1. By adding them inside container

HTML

<div class="container">
     <textarea class="text_mop" style="display: none;">Welcome to 1st sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
 </div>
 <div class="container">
     <textarea class="text_mop" style="display: none;">Welcome to 2nd sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
 </div>
Copy code

CSS

.text_mop, .btn_mop {
   display: block;
  width: auto;
}
Copy code

JS

function download(file, text) {
  //creating an invisible element
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/html;charset=utf-8, ' + encodeURIComponent(text));
  console.log(element.href);
  element.setAttribute('download', file);
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

var btn_mop = document.getElementsByClassName("btn_mop");
for (var btn of btn_mop) {
  btn.addEventListener("click", function() {
    var text = this.parentNode.getElementsByClassName("text_mop")[0];
    var filename = "MOP.txt";
    download(filename, text.value)
  });
}
Copy code

2. by previousSibling property

HTML

<textarea class="text_mop" style="display: none;">Welcome to 1st sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
 
     <textarea class="text_mop" style="display: none;">Welcome to 2nd sentence</textarea>
    <input type="button" class="btn_mop" value="Download" class="fa fa-home" aria-hidden="true" />
Copy code

CSS

.text_mop, .btn_mop {
     display: block;
    width: auto;
}
Copy code

JS

function download(file, text) {
  //creating an invisible element
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/html;charset=utf-8, ' + encodeURIComponent(text));
  element.setAttribute('download', file);
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

var btn_mop = document.getElementsByClassName("btn_mop");
for (var btn of btn_mop) {
  btn.addEventListener("click", function() {
    var text = this.previousSibling.previousSibling
    var filename = "MOP.txt";
    download(filename, text.value)
  });
}
Copy code

Solution:

A quick solution, though not as well designed as JS_INF's solution is to add the incrementor to the forEach and then use it to identify the correct .text_mop using querySelectorAll()

document.querySelectorAll(".btn_mop").forEach((item,i) => {
  item.addEventListener("click", (event) => {
    var text = document.querySelectorAll(".text_mop")[i];
    console.log(text)
  });
});
Copy code