creating a javascript function inside textarea
<p>I'm trying to create a html/css/javascript online editor for people to try small code and stuff like that.
it was actually pretty simple.. you create 2 <code>div</code>'s one is a <code>textarea</code> <code>id="input"</code> and the other is a <code>div</code> <code>id="output"</code> and you create a js function to push the content of the input into the output either by pressing a button or make it live by running the function every 2 seconds or something 
I ran the code and it worked fine for html and css but once i tried to create a function inside <code>&lt;script&gt;</code> tags inside that <code>textarea</code> it didn't actually run.. like it doesn't exist..
I can run small functions using a button if i wrote the actions inside the <code>onclick</code> but to define a function and then run it by that button is not working</p>

<pre><code>window.setInterval(function(){
    var y = document.getElementById("automatic").checked
    if (y==1){
        editorFunction()
    }
}, 1000);

function editorFunction(){
    var x = document.getElementById("input").value;
    document.getElementById("output").innerHTML = x;
}
</code></pre>

<p>My question is.. is there a way around this ?
i really want the page to stay static.. i don't want to have to send the content to a database and make a new form and render it on the page.. i wanna keep it as simple as possible
Someone asked for the html.. I don't think it's important but here it is:</p>

<pre><code>&lt;body id="body"&gt;
&lt;section class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-sm-6"&gt;
            &lt;textarea class="col-sm-12" id="input"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-6"&gt;
            &lt;div class="col-sm-12" id="output"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;
&lt;section&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-sm-3"&gt;&lt;/div&gt;
        &lt;div class="col-sm-6"&gt;
            &lt;button onclick="editorFunction()"&gt;RUN&lt;/button&gt;
            &lt;input type="checkbox" id="automatic" checked&gt;Submit the changes LIVE&lt;/input&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;
&lt;/body&gt;
</code></pre>

<p>eval() will only work when i want to execute an action.. i can't really define a function that will stay for later use</p>