DEV Community

T3C Studios
T3C Studios

Posted on

How to make a "Save" button using JavaScript?

#webdev #begginer #help

I'm working on a little project, and want to add a "Save" button which will when clicked convert everything which is inside of a certain div class into a downloadable .txt (or .pdf or any other document viewing file type) document.

I want to note one more thing, the content of that div isn't "static" (if I can call it that), since the user / visitor can edit it, to clarify, the user / visitor can delete the text in that div, as well as add new text to that div. I'm not sure does this make any kind of difference, but there it is just as a little note.

Is this possible?

Top comments (4)

Collapse
 
prakhart111 profile image
Prakhar Tandon •

This can be done through Blob constructor.
Read More below.
stackoverflow.com/questions/134051...

Cheers!

Collapse
 
t3cstudios profile image
T3C Studios •

Great! Works fine as far as the saving goes..

Just how can I select the div class I want the button to save? I cannot figure that part out..

I have this on the button:
onclick="download('Test', 'MyTasks.txt', 'text/plain')"

And the 'Test' is the text which will appear in the text file, but how can I make it be instead of "Test" whatever is in my certain div class?

Collapse
 
valeriavg profile image
Valeria •

You can get contents with

document.getElementById("your-div-id").innerText
Enter fullscreen mode Exit fullscreen mode

developer.mozilla.org/en-US/docs/W...

Collapse
 
fjones profile image
FJones • • Edited

You're likely looking for a solution that gets a div containing or adjacent to your button, or a child of an adjacent element. I'd suggest something along these lines:

<div class="has-exportable-content">
  <button type="button" onclick="saveHandler">save</button>
  <div class="exportable-content">text</div>
</div>
Enter fullscreen mode Exit fullscreen mode

With the JS along these lines:

function saveHandler({ currentTarget }) {
  let elem = currentTarget;
  do {
    elem = elem.parentElement;

    if (elem && elem.classList.contains("has-exportable-content")) {
      const { textContent } = elem.querySelector(".exportable-content") || {};
      download(textContent, ...);
      return;
    }
  } while (elem && elem !== elem.getParentNode());
}
Enter fullscreen mode Exit fullscreen mode

(Some alternatives notwithstanding depending on your particular use-case. e.g. innerText vs textContent or parentNode vs parentElement, and target vs currentTarget.)

Read next

catundanatalia profile image

We are simplifying (literals(arrays and objects)) in Js.

Natália Catunda -

leo_scott_357f10236fabe00 profile image

Preparing for Web3 in 2025: What Developers and Investors Need to Know

Leo Scott -

jdgamble555 profile image

Are Angular Resolvers on Life Support ?

Jonathan Gamble -

it_vturbo profile image

Why Atomic Design Is Not for Frontend: A Deep Dive

Valentin Turbins -