How to set a textbox to an eval() in javascript

Question

Okay, so I am trying to make a quiz where you enter some code and the quiz executes the code to see if what you typed is the same as the answer.

Here is the code and this is how the webpage looks like:

questions = "PRINT HELLO"
document.getElementById("Question").innerHTML = questions
function check(){
  document.getElementById("answertext").innerHTML = eval(document.getElementById("answerbox").value)
 
}

#answerbox{
  width:100%;
  height:500px;
  font-size:25px;
}

<h1>QUIZZZ</h1>

<h2 id = Question>JAVASCRIPT CONSOLE AND EXERCISES</h1>

<h1 id = "hi"></h1>

<textarea rows="4" cols="50" id = "answerbox">
//put your answer here
</textarea>
<textarea rows= '4' cols = "50" id = "answertext">lol</h1>
</textarea>
<input type = "submit" onclick = "check()">

Run the code to see I want the user to enter a document.write() statement inside the textbox, and have the evaluated code to be shown in the smaller multiline text box.

Try to put a document.write() statement in the textbox and run it. You should see a new page instead of the answer written in the text box.

I know that document.write is a bad practice to output things in javascript, and I know that you can edit raw HTML, but is there any other way a user can print a message without doing any of these choices?

Answer 1

Don't use eval.

Using eval is considered to be a bad practice. Read more for Why here. You can ask your user to just return the answer using a return statement as shown below, instead of asking them to do something complicated like document.write().

// Ask them to do this:
var codeFromTheAnswerBox = "var answer = 'HELLO'; return answer;"
// instead of this:
// var codeFromTheAnswerBox = "var answer = 'HELLO'; document.write(answer)";

// execute user's code
var code = new Function(codeFromTheAnswerBox);
var returnValue = code();

// Now do whatever you want to do with the answer like the following
alert("Your answer is " + returnValue);