制作历史记录如console.log

-1

第一次询问Stack时，有人可以帮我弄清楚我怎样才能像开发控制台那样在视觉反馈中输出eval，就像是历史记录feed。制作历史记录如console.log

(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; \t 
 
}; 
 

 

 
})();

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)

预先感谢您。

来源

2016-07-14 Thiago Alves

只需更新textarea的内部价值。 'history.textContent + =结果'或'history.innerHTML + =结果'。 eval也是邪恶的，除非你真的需要它，否则永远不要使用它。这是完全不需要的情况。 'iostore.value'应该会自动给你输入内的文本，不需要评估它。 – Shilly

首先阅读eval确切地确定它的用途。然后，因为它试图评估一个表达式，我将它放在一个try catch中，如果有异常，您可以输出异常。然后在textarea附加结果或异常。我也调整了一下textarea的大小，这样你可以看到更多的结果。

(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"; 
 

 
} \t 
 
}; 
 

 

 
})();

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>

来源

2016-07-14 13:17:20 depperm

制作历史记录如console.log

回答

相关问题