Blob creating function in javascript saving multiple files

Question

Can someone explain to me how this piece of code works. Also, the output is not what I want. It saves 2 files instead of 1.
Javascript

function saveTextAsFile() {
     var textToWrite = document.getElementById('textArea').innerHTML;
     var textFileAsBlob = new Blob([ textToWrite ], { type: 'text/plain' });
     var fileNameToSaveAs = "file.txt";
   
     var downloadLink = document.createElement("a");
     downloadLink.download = fileNameToSaveAs;
     downloadLink.innerHTML = "Download File";
     if (window.webkitURL != null) {
       downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
     } else {
       downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
       downloadLink.onclick = destroyClickedElement;
       downloadLink.style.display = "none";
       document.body.appendChild(downloadLink);
     }
   
     downloadLink.click();
   }
   
   var button = document.getElementById('save');
   button.addEventListener('click', saveTextAsFile);
   
   function destroyClickedElement(event) {
     document.body.removeChild(event.target);
   }

HTML

    <button id="save" onclick="saveTextAsFile()">Save</button>
    <textarea id="textArea" class="Textarea" placeholder="Click to Type" cols="20"></textarea>

ikiK · Accepted Answer · 2021-02-18 14:08:37Z

2

You code does NOT work:

textarea input values are read with .value not .innerHTML, you where getting no output so change: var textToWrite = document.getElementById('textArea').innerHTML; into var textToWrite = document.getElementById('textArea').value;
You get 2 files because you made 2 same events on same button that call same function, remove one of those:

<button id="save" onclick="saveTextAsFile()">Save</button> here remove onclick="saveTextAsFile()" or remove this two lines:

var button = document.getElementById('save');

button.addEventListener('click', saveTextAsFile);

This will fix your errors, and as far how whole code works, this is not code review site, for that visit https://codereview.stackexchange.com/ or google each command and read its definitions.

answered Feb 18, 2021 at 14:08

ikiK

6,5105 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SomeRandomUser101_ Over a year ago

When I tried removing var button = document.getElementById('save'); button.addEventListener('click', saveTextAsFile);it still saved 2 files. But other than that, when I tried removing onclick="saveTextAsFile()" it worked fine. Thanks

ikiK Over a year ago

@SomeRandomUser101_ Not possible with code you presented.

Collectives™ on Stack Overflow

Blob creating function in javascript saving multiple files

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related