如何让 Javascript 函数将两个文本输入保存到一个文本 (.txt) 文件中？

Question

所以我正在编写一个网页，用户在其中将值输入到两个文本区域字段中，一旦他们单击提交按钮，程序就应该开始下载两个文本输入并将它们保存到一个文本文件中.到目前为止，我已经弄清楚如何只将一个文本输入保存到文本文件中，并且我一直在尝试弄清楚如何让我的 Javascript 函数为两个文本都完成此操作输入。这是我的 html 和 javascript 代码：

function saveIndex() {
  var myBlob = new Blob([document.getElementById('textbox').value], {
    type: "text/plain"
  });

  var url = window.URL.createObjectURL(myBlob);
  var anchor = document.createElement("a");
  anchor.href = url;
  anchor.download = "textfile.txt";

  anchor.click();
  window.URL.revokeObjectURL(url);
  document.removeChild(anchor);
}

<body>
  <label for="textbox">Textbox1</label>
  <textarea id="textbox1"></textarea>

  <label for="bio">Textbox2</label>
  <textarea id="textbox2"></textarea>

  <button type="button" id="bt" value="Exporter" onclick="saveIndex()" for="textbox"> EXPORT </button>
</body>

我知道我可能需要为我的第二个 textarea 标签创建一个新的 Blob，但我已经试过了，还尝试了不同的方法来将它实现到我的函数中，但没有成功。我不能为第二个 textarea 标签创建另一个函数，这必须在当前的 saveIndex() 函数中完成。任何帮助将不胜感激！

Answer 1

您试图获取 ID 为 'textbox' 的元素的值，但没有这样的元素。您有 'textbox1' 和 'textbox2'。此代码将检索两者并将它们与换行符连接到您的 blob 中。

我已经修复了您 HTML 中的一些错误（标签与输入的链接不正确），另外请使用 let & const 而不是古老的 var！

function saveIndex() {
  const boxString1 = document.getElementById('textbox1').value
  const boxString2 = document.getElementById('textbox2').value
  const myBlob = new Blob([`${boxString1}\n${boxString2}`], {
    type: "text/plain"
  });

  const url = window.URL.createObjectURL(myBlob);
  const anchor = document.createElement("a");
  document.body.appendChild(anchor);
  anchor.href = url;
  anchor.download = "textfile.txt";

  anchor.click();
  window.URL.revokeObjectURL(url);
  anchor.remove();
}

<body>
  <label for="textbox1">Textbox1</label>
  <textarea id="textbox1"></textarea>

  <label for="textbox2">Textbox2</label>
  <textarea id="textbox2"></textarea>

  <button type="button" id="bt" onclick="saveIndex()">EXPORT</button>
</body>

如何让 Javascript 函数将两个文本输入保存到一个文本 (.txt) 文件中？

How to have Javascript function save two text inputs into one text (.txt) file?

html

javascript

jquery

textarea

dom-events