Question

我正在制作一个HTML代码编辑器，我测试了所有我知道的HTML标签，除了脚本标签外，它们都有效。

当我在文本区域中键入<script>something</script>并单击按钮时，脚本不会执行。

请帮忙！这是代码：

<span id="finishedProduct">
<p>When you enter code, your finished product will be here! Don't worry, if you make a mistake you  can fix it later!</p>
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea></br>
<a href="javascript:makeCode()"><button type="button">Run Code!</button></a>
</form>
<script>
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>

Answer 1

以下是工作代码：

<span id="finishedProduct">When you enter code, your finished product will be here! Don't worry, if you make a mistake you  can fix it later!
</span>
<form name="userCode">
    <textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea>
    <br/>
    <button type="button" onClick="makeCode()">Run Code!</button>
</form>
<script type="text/javascript">
    function makeCode() {
        var userCode=document.forms["userCode"]["userCode"].value;
        document.getElementById('finishedProduct').innerHTML = userCode;
    }
</script>

这是指向JSFiddle的链接：http://jsfiddle.net/Q2qLF/。我删除了一些破碎的HTML，例如;一个按钮不应该包含在一个锚标签中，我已经添加了一个＆＃39; onclick＆＃39;在你的按钮中，它将调用＆＃39; makeCode（）＆＃39;功能，我已经添加了＆＃39; type =＆＃34; text / javascript＆＃34;＆＃39;进入您的脚本标记，因为这最大化了兼容性。

如果您需要更多帮助，请与我们联系

我已更新了我的JSFiddle http://jsfiddle.net/Xanco/Q2qLF/1/ 现在有2个textareas，一个用于HTML，另一个用于Javascript。我还创建了一个名为＆＃39; makejs＆＃39;的新功能，它获取了Javascript textarea的值并通过一个＆＃39; eval＆＃39;运行它。 - 这会执行传递给它的Javascript。

Answer 2

我已将答案放在小提琴中：http://jsfiddle.net/joshnicholson/P8eh9/

我不确定你为什么要将一个按钮元素包装在一个锚点内，但我会采用稍微不同的方式。

以下是修订后的javascript：

var myButton = document.getElementById("btnRunCode");

myButton.addEventListener("click", makeCode);

function makeCode() {
    var userCode=document.forms["userCode"]["userCode"].value;
    document.getElementById('finishedProduct').innerHTML = userCode;
}

我添加了＆＃34; btnRunCode＆＃34;对你的按钮元素，只是为了让我更容易。见小提琴。

为什么JavaScript不会运行？

2 个答案: