Javascript .innerHTML; Issue

Question

Okay for a little background I am creating an HTML email signature generator for a client and have run into an issue multiple times. I created a function that allows the user to download the file as a.html so they may install it into their email platform of choice. The problem I am running into a lot is for some reason when using # anywhere in the index.html file it seems like the code stops there when downloading. I assume the # is somehow interfering with the.innerHTML; making it stop for some reason.

I will attach my codepen.io bare in mind there isn't much CSS as I have just started on this and wanted to get the functionality working before making the signature look nice.

link: https://codepen.io/andrewnyrivera/pen/XWaELwL

/* DOWNLOAD! */
    function download() {
      var filename = document.getElementById("filename").value;
      var a = document.body.appendChild(document.createElement("a"));
      a.download = filename + ".html";
      a.href =
        "data:text/html," + document.getElementById("content").innerHTML; // Grab the HTML
      a.click(); // Trigger a click on the element
    }

Also here is an image of how the code is cut off, you can see this in inspect element after you download the file. enter image description here

Answer 1

I have figured it out!!!! Thank you to those who have helped guide me! I did some research based on what I was told about the UTF-8 not allowing # symbols and that the # symbol fragments the URL. I ended up putting the "document.getElementById("content")" as a variable and then did "encodeURIComponent(content)". I am not 100% sure why it works but will find out. I assume it encodes it to where the # is no longer there until decoded back to # there for not fragmenting the URL.

Thank you to those who help!

Best,

Andrew

Answer 2

It looks like the problem is that the alt="" attribute cannot accept special characters like # . It requires to be just a simple UTF-8 string.

Here is a link for more information: https://html.com/attributes/img-alt/#The_alt_text