0

I have a javascript function that reads an SVG file and turns it to SVG dom element and after that copies it to the user's clipboard.

What I'm struggling with is returning data from fetch promise in the function. I want to return it and also use this SVG tag in another function also.

here is my complete code, where am I doing this wrong? What I cannot achieved is to return the final SVG as a variable to the outer function to use it in another function.

please if possible provide me with a modified jsfiddle link.

  const convertImages = (svg) => {
    var mysvg = '1';
    //Download Button
    var svg='';
    //Download Button
    document.querySelectorAll("div.icons-card").forEach((item) => {
      item.querySelector('.button-download').addEventListener("click", (event) => {
        let myvar = item.querySelector('.button-download');
        const svgUrl = item.querySelector('div.icons-card__image');
        const style = window.getComputedStyle(svgUrl, false);
        const bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
        console.log("here is background url:", bi);
        fetch(bi)
          .then((res) => res.text())
          .then((data) => {
            // console.log("here is data:",data)
            const parser = new DOMParser();
            svg = parser
              .parseFromString(data, "image/svg+xml")
              .querySelector("svg");
            console.log("here is svg", svg);
          })
          .catch((error) => console.error(error));
      });
    });
  };
  const svg = convertImages();
  // console.log(svg);
<div class="icons-card">
    <a class="icons-card__link" aria-label="Link to item page" rel="nofollow" href="https://svgshare.com/i/d5F.svg">
        <div class="icons-card__image" style="background-image: url(https://svgshare.com/i/d5F.svg)"></div>
        <span class="icons-card__title">Clicking</span>
    </a>
    <div class="icons-card__download">
        SVG
        <button class="download-button download-button--black button-copy">
            <svg class="download-button__icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="8" y="3" width="13" height="13" rx="1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></rect>
                <path d="M4 7v12c0 .6.4 1 1 1h12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </button>

        <button class="download-button download-button--black button-download">
            <svg class="download-button__icon" width="25" height="24" viewBox="0 0 25 24">
                <use xlink:href="#download_button_icon"></use>
            </svg>
        </button>

    </div>

</div>
Naderjlyr
  • 165
  • 4
  • 13
  • You should call the function that needs to access the SVG from the event handler. You cannot return a value from an event handler (at least not the way you want to). Maybe this helps understanding callbacks better: https://felix-kling.de/blog/2019/javascript-callbacks-misconceptions.html – Felix Kling Dec 27 '21 at 16:26
  • @FelixKling thank you for your reply, I'll check the provided link. but can you provide me with a fiddle link and modify the code if you have time? – Naderjlyr Dec 27 '21 at 17:05

0 Answers0