DEV Community

Discussion on: How to make a "Save" button using JavaScript?

View post

Replies for: 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 ha...

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.)