How to run on the page typed js

Question

I'm currently working on a project which requires me to run by the user typed javascript in the form of a string.

I've tried adding an empty <script> tag to the html and appending the string (containing the users freshly typed (after the page was loaded) javascript) to this script tag but this doesn't work. (since the code inside the script tag will be run immediately after the page is loaded).

So I tried a different approach. I wrapped the js string inside of a function like so:
function runCode() { userString }
This is what the string I now append to the empty script tag looks like:
var code = "function runCode() { "+ userString +" }"

However this still doesn't work. The code (userString) shows up in the script tag according to the chrome dev tools, but trying to run the function causes the following error:
Uncaught ReferenceError: runCode is not defined

Does somebody know how this works? What is the proper way for me to do this?

Some background:

The project I'm working on is an online tool to draw using js. The goal here is to use the two.js library and link it to a modified textarea. (codemirror) Clicking the button will take your typed in code and use it to modify the two.js canvas on the other half of the screen.

This will make it easier to draw using the library, since you don't have to set up all the html, css and js files yourself, but instead you can focus on the code.

Note: The js you type into the textarea can by any valid js, so simple things as alerts, or even jQuery lines will work just fine.

Answer 1

You have to use eval(). Extract the user input from an onclick event and pass it into eval like so:

eval(userString)

Answer 2

Use eval() function. However be aware that this is by design a HUGE hole of security.