Javascript,HTML和onClick - 功能未定义

Question

我正在尝试在Javascript中为"富文本编辑器"创建"插入链接"按钮.基本上,它要做的是在其内容中添加以下代码:

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

someJSFunction()当用户点击编辑器内部的按钮时,必须触发.我编写了一个Javascript函数,在单击"插入链接"按钮时添加该代码,如下所示:

editor.setContent(previousContent + theHtmlCode);

但是,当我点击链接时someJSFunction()不会触发,而是我得到一个"功能未定义"错误.我试图someJSFunction()在全球范围内定义,但它仍然不会看到它.奇怪的是,即使我做了像添加一样丑陋的事情

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

对于编辑器的内容,它仍然会抛出相同的错误.我在SO中遇到过一些有同样问题的人,但是他们设法通过在全局范围内定义它们的功能来解决它​​.

请注意,我无法直接编辑HTML代码,这就是为什么我不得不求助于使用一段Javscript来插入一段HTML,而这又会调用另一段Javascript.

在你问之前,不,我不会使用JQuery.

Answer 1

1. 避免在 HTML 中声明事件
2. 避免常量

下面的代码应该可以工作。

超文本标记语言

<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";
}

上面示例的 jsfiddle https://jsfiddle.net/ar54w16L/

享受 ！