我的簡單javascript代碼編輯器有一些錯誤

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的新手，所以我沒有關於它的enoufgh知識:) 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;
}

嘗試使用簡單的警報。

請注意，每次鍵入內容時，它都會執行代碼，這會在控制台上造成很多錯誤，因為代碼沒有完成，嘗試刪除此oninput並只讓按鈕執行validate函數。

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 個解決方案

解決方案1
0 2015-02-26 14:49:24

解決方案2
0 已采納 2015-02-26 17:30:25

我的簡單javascript代碼編輯器有一些錯誤

問題描述

2 個解決方案

解決方案1 0 2015-02-26 14:49:24

解決方案2 0 已采納 2015-02-26 17:30:25

解決方案1
0 2015-02-26 14:49:24

解決方案2
0 已采納 2015-02-26 17:30:25