textarea javascript 调试结果到 innerHTML 段落 "undefined"

Question

我正在做一个代码编辑器，几乎一切正常，我在 texarea 中键入文本并按下按钮加载一个函数，代码的结果出现在网络浏览器控制台上，我正在尝试喜欢“document.getElementById('output').innerhtml = window.eval(txtarea.value);” 但是好像不行。

  function DebugInp(){
           var txtarea = document.getElementById('input');
           document.getElementById('output').innerHTML =  window.eval(txtarea.value);//output = paragraph in html.
         };
/** 
*My problem is that the innerHTML is showing undefined, but when I'm getting to console,
*it appears the result.
*I'm thinking of maybe getting all of the outputs of the console, but IDK how to do it
*Kind of like: document.getElementById('output').innerHTML = console.logs?
*I am still searching but any help would be nice.
*/

提前致谢！ PS: 我更擅长前端开发，想了解更多后端所以请不要讨厌。

Answer 1

你正在做的事情非常不安全，有很多更好的方法来解决这个问题。但是尽管如此，您需要限制输入代码的上下文。简单地评估整个代码不会给你控制台日志。您需要为代码公开一个 API 以将输出发送到。

最小示例：

var txtarea = document.getElementById('input');
document.getElementById('output').innerHTML =  window.eval(`
const console = {
  log(...args) {
    document.getElementById('output').innerText += '\n' + args.join(' ');
  }
};
${txtarea.value}
`);

Answer 2

哦！！！我做到了伙计们！只需为 console.log 创建一个新的标准函数，以便它存储我在这里找到答案的每个日志：

  console.stdlog = console.log.bind(console);
        console.logs = [];
        console.log = function(){
        console.logs.push(Array.from(arguments));
        console.stdlog.apply(console, arguments);
        }
         var txtarea = document.getElementById('input');
           window.eval(txtarea.value);
           document.getElementById('output').innerHTML =  console.logs;

哎呀！祝大家有个愉快的一天！

textarea javascript 调试结果到 innerHTML 段落 "undefined"

textarea javascript debug result to innerHTML paragraph "undefined"

html

javascript

innerhtml

getelementbyid

console.log