6

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.

  • 1
    Can you give us a [JSFiddle](http://jsfiddle.net/)? Please? – Robbie Wxyz Nov 25 '13 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 Nov 25 '13 at 22:53
  • 1
    @m59 : +1 HTML validators should really fail on inline `onclick` handlers. – Robbie Wxyz Nov 25 '13 at 22:54
  • @SuperScript lol, inline js should be removed altogether, but I guess that would cause too many people problems. – m59 Nov 25 '13 at 22:55
  • If your button is in the `iframe` and your function is out of it, you will need to call `window.top.someJSFunction()`. – Robbie Wxyz Nov 25 '13 at 22:57
  • @m59 Ok. Would you be so kind to point out how should I rewrite that code, and why is it such a bad practice? I know about globals being evil, but if you took the time to actually read my question, you'd see I only tried defining someJSFunction as global because it worked for other people here in SO. –  Nov 26 '13 at 01:30
  • 1
    @Phillipe I read all of your code including that part. I commented 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.com or jsfiddle – m59 Nov 26 '13 at 01:38
  • @m59 I know what "bad practice" means. However, Im fairly new to html and I honestly dont know why onClick is bad, nor how should I write the code. This is all in the context of a huge project, so I doubt Ill be able to provide you with a demo, but Ill try and get something tomorrow. –  Nov 26 '13 at 02:03
  • possible duplicate of [Uncaught ReferenceError: function is not defined with onclick](http://stackoverflow.com/questions/17378199/uncaught-referenceerror-function-is-not-defined-with-onclick) – khollenbeck Apr 23 '15 at 16:38

2 Answers2

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

Enjoy !

D. Schreier
  • 1,700
  • 1
  • 22
  • 34
-2

Try onclick instead onClick in html.

brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
Igris Dankey
  • 383
  • 2
  • 6