我的简单 javascript 代码编辑器有一些错误

My simple javascript codeeditor have some errors

我创建了一个简单的代码编辑器,但我不知道其中有什么错误。我使用的 HTML 代码是

<html>
<head>
<script src="main.js"></script>
<style>
textarea{
width: 33%;
height: 300px;
}
</style>
</head>
<body>
<textarea id="html" width="33%" oninput="validate()"></textarea>
<textarea id="css" width="33%" oninput="validate()"></textarea>
<textarea id="js" width="33%" oninput="validate()"></textarea>
<button onclick="validate()">Compile</button>
<div id="result" ></div>
</body>
</html>

main.js脚本如下:

function validate(){
//get the code values
var html1 = document.getElementById("html").value;
var css1 = document.getElementById("css").value;
var js1 = document.getElementById("js").value;

//Generate the code
var htmltag = "<body>"+ html1 + "</body>";
var csstag = "<style>" + css1 + "</style>";
var jstag = "<script>" + js1 + "</" + "script>";

var totalcode = "<html>" + "<head>"+ csstag + jstag + "</head>" + htmltag + "</html>";

//apply the code
document.getElementById('result').innerHTML = totalcode;

}

不知道,但一定有错误。我是 javascript 的新手,所以我对它没有足够的了解 :) 感谢先进的帮助。

我假设你想在 textarea 中执行 JS。

不需要封装在script标签里面,因为不是新请求再执行。

您应该只对 js textarea 的内容调用 eval

function validate(){
    //get the code values
    var html1 = document.getElementById("html").value;
    var css1 = document.getElementById("css").value;
    var js1 = document.getElementById("js").value;

    //Generate the code
    var htmltag = "<body>"+ html1 + "</body>";
    var csstag = "<style>" + css1 + "</style>";
    var jstag = "<script>" + js1 + "</" + "script>";

    var totalcode = "<html>" + "<head>"+ csstag + jstag + "</head>" + htmltag + "</html>";
    eval(js1);
    //apply the code
    document.getElementById('result').innerHTML = totalcode;
}

尝试使用简单的警报。

请注意,每次输入内容时,它都会执行代码,这会导致控制台出现很多错误,因为代码未完成,请尝试删除此 oninput 并仅让按钮执行验证功能。

你有很多问题。

  • 您正试图将 HTMLHEAD 标签插入到 DIV 中,这在页面上是无效的。
  • 您正在 在 HTML 存在 之前执行脚本,因此将 jstag 移动到末尾。
  • 你真的应该只尝试在按下 运行 按钮时执行它(就像 JSFiddle 那样)。

正如您最初用 jQuery 标记的那样(一件好事)我已经在 jQuery 中编写了我的版本:

$('#validate').click(function() {

    //get the code values
    var html1 = $("#html").text();
    var css1 = $("#css").text();
    var js1 = $("#js").text();

    //Generate the code
    var htmltag = html1;
    var csstag = "<style>" + css1 + "</style>";
    var jstag = "<script>" + js1 + "</" + "script>";

    var totalcode = csstag + htmltag + jstag;

    //apply the code
    $('#result').html(totalcode);
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/jc48khkp/6/

我为 textarea 准备了示例代码,HTML 和 css 用于测试。

如果您愿意,可以随意将其延长回原始状态 JavaScript:)