像 console.log 那样做一些历史提要

Question

第一次在 Stack 上提问，有人能帮我弄清楚如何像开发控制台那样在视觉反馈中输出 eval，就像历史提要一样。

(function init() {
var btn = document.getElementById("btn").onclick = function(){
            var iostore = document.getElementById("io");
            var history = document.getElementById("history");
            var result = eval(iostore.value);
            console.log(result);
            iostore.value = result; 
};


})();

body, html{width:100%;height:100%;margin: 0px auto;background-color:#EEE;}
#io{background-color:aqua;width:auto;height:auto;border:0;outline:none;font-size:1.5em;}
button{border:0;border-radius: 5px;background-color:#999;font-size:1.7em;}#history{resize: none;background-color:#EEE;border:0;outline:none;cursor:default;color:black;opacity:0.7;}#creation{background-color:aqua;width:auto;height:auto;border:0;outline:none;font-size:1.5em;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="interfacecontainer">
<input type="text" id="io">  
<button id="btn">run</button><br>
<textarea id="history"></textarea> 
<div id="creation"></div>
</div>   
</body>
</html>

What i mean (browser print-screen)

提前致谢。

Answer 1

首先仔细阅读 eval 的具体内容，以确保它是您想要的。然后因为它试图评估一个表达式，所以我将它放在 try catch 中，如果有异常，你可以输出异常。然后将结果或异常附加到文本区域。我还稍微调整了您的文本区域，以便您可以看到更多结果。

(function init() {
var btn = document.getElementById("btn").onclick = function(){
            var iostore = document.getElementById("io");
            var history = document.getElementById("history");
try {
var result =eval(iostore.value);
history.value += result+"\n";
} catch (e) {
    iostore.value=e.message;
history.value += e.message+"\n";

} 
};


})();

body, html{width:100%;height:100%;margin: 0px auto;background-color:#EEE;}
#io{background-color:aqua;width:auto;height:auto;border:0;outline:none;font-size:1.5em;}
button{border:0;border-radius: 5px;background-color:#999;font-size:1.7em;}#history{resize: none;background-color:#EEE;border:0;outline:none;cursor:default;color:black;opacity:0.7;height:50px}#creation{background-color:aqua;width:auto;height:auto;border:0;outline:none;font-size:1.5em;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="interfacecontainer">
<input type="text" id="io">  
<button id="btn">run</button><br>
<textarea id="history"></textarea> 
<div id="creation"></div>
</div>   
</body>
</html>

像 console.log 那样做一些历史提要

Making somewhat a history feed like console.log does

javascript

developer-console