Javascript, HTML and onClick - Function is not defined - Stack Overflow

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.

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.

• javascript
• html
• onclick

Share Improve this question Follow asked Nov 25, 2013 at 22:50 user2330526user2330526 9

• 1 Can you give us a JSFiddle? Please? – Robin Commented Nov 25, 2013 at 22:53
• 5 Please stop using onclick in your html forever. That has never been a good practice. Global variables are also bad practice. – m59 Commented Nov 25, 2013 at 22:53
• 1 @m59 : +1 HTML validators should really fail on inline onclick handlers. – Robin Commented Nov 25, 2013 at 22:54
• @SuperScript lol, inline js should be removed altogether, but I guess that would cause too many people problems. – m59 Commented Nov 25, 2013 at 22:55
• 1 @Phillipe I read all of your code including that part. I mented about that to note that just because something "works" doesn't mean you should do it. Plenty of people would be glad to help if you would do as SuperScript asked and provide a demo on something like jsbin. or jsfiddle – m59 Commented Nov 26, 2013 at 1:38

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 2

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/ar54w16L/

Enjoy !

Try onclick instead onClick in html.