onclick JS event on a image map?

Question

I have been searching for hours for an answer here at stackoverflow and in the web. However all the answers I tried didn't work for me.

Basically, I would like to put an onclick event on an image map. the event is a java script function. When the user click on an area element it will download the text on the editor as a word file.

To illustrate what I'm trying to explain, here is the https://jsfiddle.net/00bk1zad/ with the code I made. I don't know what should I edit to make it working.

Thank you!

The code:

 function txtdownload() { console.log('called') var textToSave = document.getElementById("editor").value; var textToSaveAsBlob = new Blob([textToSave], { type: "application/msword" }); var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob); var fileNameToSaveAs = "YouKtub.doc"; var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; downloadLink.href = textToSaveAsURL; downloadLink.onclick = destroyClickedElement; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); downloadLink.click(); } 

 <div align=center> <textarea id="editor" wrap="PHYSICAL" name="q" rows="9"></textarea> </div> <div> <img src="https://image.ibb.co/eYKuFc/img.jpg" usemap="#map1Map" border=0> </div> <map name=map1Map> <area coords="268,46,47,113" href="#" onclick="txtdownload()"> </map> 

Answer 1

I removed downloadLink.onclick = destroyClickedElement; and added document.body.removeChild(downloadLink); at the end. So when you press button and download file, the hidden link is destroyed. (Works in Chrome)

UPDATE: (now works in Firefox locally or on JSFiddle - stackoverflow codesnippet still doesn't work) In area tag I removed onclick="txtdownload()" and changed href="#" to href="javascript:txtdownload()" . JSFiddle: https://jsfiddle.net/00bk1zad/2/

For future, you can use FileSaver.js. Check this link with examples: https://github.com/eligrey/FileSaver.js/

 function txtdownload() { var textToSave = document.getElementById("editor").value; var textToSaveAsBlob = new Blob( [textToSave], {type:"application/msword"}); var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob); var fileNameToSaveAs = "YouKtub.doc"; var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; downloadLink.href = textToSaveAsURL; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); } 

 <div align=center> <textarea id="editor" wrap="PHYSICAL" name="q" rows="9"></textarea> </div> <div> <img src="https://image.ibb.co/eYKuFc/img.jpg" usemap="#map1Map" border=0> </div> <map name=map1Map> <area coords="268,46,47,113" href="javascript:txtdownload()"> </map>