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

时间:2015-02-26 14:19:03

标签: javascript html html5 editor

我创建了一个简单的代码编辑器,但我不知道里面有什么错误。我使用的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在高级方面的帮助。

2 个答案:

答案 0 :(得分:0)

我假设你想在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;
}

尝试使用简单的提醒。

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

答案 1 :(得分:0)

你有很多问题。

  • 您正试图将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/

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

如果您愿意,请随意将其延长回原始JavaScript:)