我创建了一个简单的代码编辑器,但我不知道里面有什么错误。我使用的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在高级方面的帮助。
答案 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)
你有很多问题。
HTML
和HEAD
个标记注入页面无效的DIV
。正如你最初使用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:)