Question

我创建了一个简单的代码编辑器，但我不知道里面有什么错误。我使用的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的新手，所以我不会对它有所了解:) Thanx在高级方面的帮助。

Answer 1

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

您不需要封装在脚本标记内，因为它不是新请求，而是新执行。

您只应在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;
}

尝试使用简单的提醒。

请注意，每次输入内容时，都会执行代码，这会在控制台上造成很多错误，因为代码还没有完成，尝试删除此输入并只允许按钮执行验证功能。

Answer 2

你有很多问题。

您正试图将HTML和HEAD个标记注入页面无效的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/

我使用示例代码，HTML和css为textarea启动了测试。

如果您愿意，请随意将其延长回原始JavaScript：）

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

2 个答案: