在textarea文本域中输入JS代码并执行

最近做了一个JS在线练习页面，要求在一个编辑框中输入代码，执行并呈现结果。

制作过程中发现了以下问题：
1、如果输入的代码中使用了 document.write() 输出结果，执行后会清空当前页面。
解决方法：用写入innerHTML替换write()，虽然还存在清除结果块中其它内容的bug，但不会清除页面了。
2、如果输入的代码中有函数，函数调用时会产生 undefined 错误。
解决方法：先生成一个<script>标签，再把文本域中的JS代码提取出来写在这个标签内，问题就消失了。

以下是页面效果：

左边是一个textarea文本域，里面可以事先放置代码，也可以修改和输入新代码。代码中可包括HTML、CSS和Javascript、jQuery。
右边是当前的实时效果，修改代码后，单击空白处就可看到即时效果。

CSS：

<style>
.test_box{
   
    min-width: 400px;
    height: 400px;
    display: flex;
}
#code{
   
    flex: 1;
    height: 100%;
    background-color: #2d3143;
    color: white;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 16px;
}
#result{
   
    flex: 1;
    height: 100%;
    border: solid 1px #bbbbbb;
}
</style>

HTML：