console.logのような履歴フィードを作成すると

-1

初めてスタックに尋ねることができます。開発者のコンソールのような視覚的なフィードバックで、ヒストリフィードのような評価をどのように出力することができますか？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

ただ、テキストエリア内の値を更新。 'history.textContent + = result'または' history.innerHTML + = result'を返します。あなたが本当にそれを必要としない限り、evalは悪です。そして、これは完全に不要なケースです。 'iostore.value'は自動的にあなたの入力内のテキストを与え、評価する必要はありません。 – Shilly

最初に正確に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"; 
 

 
} \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のような履歴フィードを作成すると

答えて

関連する問題