How to make 'Save' button to save HTML Input (type="text") value to seperate .txt file (JavaScript)

I have issues with making 'Save' button to save my HTML Input (type="text") value to seperate .txt file.

Can someone with enough JavaScript experience and knowledge help me with this problem, thanks in advance.

I wrote my HTML code for both input and button

<input class="test" type="text" id="test1" value="123">
<button class="savebutton">Save</button>

Answer

You can use the following code to save the text to a .txt file.

>document.querySelector('button.savebutton').addEventListener('click', function() {
    const txt = document.querySelector('input.test#test1').value;
    // make a data url out of the text
    const url = "data:text/plain;base64," + btoa(txt);
    // create a element that is hidden and used to download the file at the url
    const a = document.createElement("a");
    a.href = url;
    a.download = "myfile.txt";
    a.hidden = true;
    document.body.appendChild(a) // add the download element to body
    a.click(); // click the element from js to download the file
    a.remove(); // remove the element
});

Explanation

This code gets a data url for the text using btoa, then creates a hidden a element and adds the url to it and set the file name to myfile.txt. It then clicks it to start the download and removes the element.

I hope this helps.

How to make 'Save' button to save HTML Input (type="text") value to seperate .txt file (JavaScript)

Answer

Explanation

Related Articles

React use useEffect to load data asynchronously

Cypress and NextJS using React Server Actions

Cookie shown in cookies tab, but disappears after a second [NextJS & cookies-next]

React use useEffect to load data asynchronously