textarea javascript debug result to innerHTML paragraph "undefined"

Question

I am doing a code editor, almost everything is working, I type the text in the texarea and press a button to load a function, and the result of the code appears on the web browser console, I am trying to do like "document.getElementById('output').innerhtml = window.eval(txtarea.value);" But it does not seem to work.

  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.
*/

thanks in advance! PS: I am better at frontend dev, trying to understand more of backend so don't hate please.

you're... using unsafe eval on a text input – skara9 Dec 30 '21 at 19:06 — skara9, Dec 30 '21 at 19:06
what do you mean? may i ask. @skara9 – Mr. Lima Dec 30 '21 at 19:08 — Mr. Lima, Dec 30 '21 at 19:08

score 0 · Answer 1 · answered Dec 30 '21 at 19:18

0

What you're doing is very unsafe and there are many better ways to go about it. But nevertheless, you need to constrain the context of your input code. Simply evaluating the whole code won't give you the console logs. You need to expose an API for the code to send output to.

Minimal example:

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

answered Dec 30 '21 at 19:18

skara9

4,042
1
6
21

O_O nice! lemme test, makes sense i searched in Mozilla. ok, ok let me try this code you just send. – Mr. Lima Dec 30 '21 at 19:21
Ohhh just realized a thing, no no no, you did not understand, i will do myself a console.log in the textarea, if there isn't any input i don't want to show anything. – Mr. Lima Dec 30 '21 at 19:24
like, if i put ```console.log('Hello World!');``` in the textarea, the window.eval throws undefined to my paragraph but a log to the console of the webbrowser – Mr. Lima Dec 30 '21 at 19:26

score 0 · Accepted Answer · answered Dec 30 '21 at 19:34

OH!!! i did it guys! Just create a new standard function for console.log so it stores every logs i found the answer right here: https://stackoverflow.com/a/19846113/16260964

  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;

GG! Have an great day everyone!

textarea javascript debug result to innerHTML paragraph "undefined"

2 Answers2