我的简单 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 并仅让按钮执行验证功能。
你有很多问题。
- 您正试图将
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/
我为 textarea
准备了示例代码,HTML 和 css 用于测试。
如果您愿意,可以随意将其延长回原始状态 JavaScript:)
我创建了一个简单的代码编辑器,但我不知道其中有什么错误。我使用的 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 并仅让按钮执行验证功能。
你有很多问题。
- 您正试图将
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/
我为 textarea
准备了示例代码,HTML 和 css 用于测试。
如果您愿意,可以随意将其延长回原始状态 JavaScript:)