如何让 Javascript function 将两个文本输入保存到一个文本 (.txt) 文件中？
[英]How to have Javascript function save two text inputs into one text (.txt) file?
问题描述
So I'm writing a webpage where the user inputs values into two textarea fields, and once they click on the submit button, the program is supposed to initiate a download of both text inputs and save them into a text file.
所以我正在编写一个网页，用户在其中将值输入到两个文本区域字段中，一旦他们单击提交按钮，程序就应该开始下载两个文本输入并将它们保存到一个文本文件中。 So far, I've figured out how to have only one of the text inputs be saved to the text file, and I've been trying to figure out how to get my Javascript function to have this done for both text inputs.到目前为止，我已经想出了如何只将其中一个文本输入保存到文本文件中，并且我一直在尝试弄清楚如何让我的 Javascript function 为两个文本输入完成此操作。 Here is my html and javascript code:这是我的 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>
I know I need to probably create a new Blob for my second textarea tag, but I've tried that and also tried different ways to implement it into my function without any success.我知道我可能需要为我的第二个 textarea 标签创建一个新的 Blob，但我已经尝试过，并且还尝试了不同的方法来将它实现到我的 function 中，但没有成功。 I cannot make another function for the second textarea tag, this must all be done within the current saveIndex() function. Any help would be greatly appreciated!我不能为第二个 textarea 标签制作另一个 function，这必须全部在当前 saveIndex() function 内完成。任何帮助将不胜感激！
1 个解决方案
解决方案1
1 已采纳 2022-03-05 22:55:13
You were trying to get the value of an element with an ID of 'textbox' but there wasn't such an element.您试图获取 ID 为“文本框”的元素的值，但没有这样的元素。 You have 'textbox1' and 'textbox2'.您有“文本框 1”和“文本框 2”。 This code will retrieve both and concatenate them with a newline into your blob.此代码将检索两者并将它们与换行符连接到您的 blob 中。
I've fixed up some errors in your HTML (the labels not linking correctly with their inputs), also please use let & const instead of ancient var!我已经修复了您的 HTML 中的一些错误（标签未正确链接到他们的输入），还请使用 let & const 而不是 ancient 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.