Javascript, HTML and onClick - Function is not defined

Question

I'm trying to make an "Insert link" button to a Rich Text Editor in Javascript. Basically, what it'll do is adding the following code to its content:

<a href="linkGoesHere" onClick="someJSFunction();"> textGoesHere </a>

The catch is, someJSFunction() must fire when the user clicks on the button inside the editor itself. I wrote a Javascript function which adds that code when the Insert Link button is clicked on, like this:

editor.setContent(previousContent + theHtmlCode);

However, when I click on the link someJSFunction() doesn't fire, and instead I get a "Function is not defined" error. I tried to define someJSFunction() in the global scope, but it still won't see it. The weird thing is, even if I do something ugly like adding

<script type="text/javascript"> *(I define someJSFunction() here)* </script> <a href="linkGoesHere" onClick="someJSFunction();"> textGoesHere </a>

to the editor's content it'll still throw the same error. I've seen a few people in SO with the same problem, but they somehow managed to solve it by defining their functions in the global scope.

Notice that I can't edit the HTML code directly, which is why I have to resort to using a piece of Javscript which will insert a piece of HTML which in turn will call another piece of Javascript.

And before you ask, no, I won't use JQuery.

Answer 1

1. Avoid event declare in HTML
2. Avoid constant

The code below should works.

HTML

<textarea id="editor"></textarea>
<a id="link" href="#">Link</a>

Javascript

var link = document.getElementById('link');
link.addEventListener('click', editContent);

function editContent() {
  var editor = document.getElementById('editor');
  editor.value += "text";
}

The jsfiddle for the example above https://jsfiddle.net/ar54w16L/

Enjoy !

Answer 2

Try onclick instead onClick in html.