Clearing a text box using a JavaScript function

I have the following code for a jscript implementation of skulpt to run Python in the browser. I have added a "clear" button, and when it is clicked, I want the text inside the textbox, as well as any "run" code, to be deleted/cleared from the screen.

The below shows my attempt (the function "clearit") but it doesn't work. Any suggestions - please post code for that function with an explanation for what I was doing wrong/corrections.

Relevant function

   function clearit(){ 
   var prog = document.getElementById("yourcode").value; 
   mypre.innerHTML = 'TRY SOME NEW CODE'; 
   <textarea id="yourcode" cols="40" rows="10">
print("Hello World")
</textarea>
}

I paste the full code below, because it could be down to the fact that I am putting the function in wrong place. It stops working altogether once I add this function.

Full code (page.html)

<!DOCTYPE html>
<html>
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> 
<script src="http://www.skulpt.org/js/skulpt.min.js" type="text/javascript"></script> 
<script src="http://www.skulpt.org/js/skulpt-stdlib.js" type="text/javascript"></script> 

</head> 

<body> 

<script type="text/javascript"> 
// output functions are configurable.  This one just appends some text
// to a pre element.
function outf(text) { 
    var mypre = document.getElementById("output"); 
    mypre.innerHTML = mypre.innerHTML + text; 
} 
function builtinRead(x) {
    if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
            throw "File not found: '" + x + "'";
    return Sk.builtinFiles["files"][x];
}

// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() { 
   var prog = document.getElementById("yourcode").value; 
   var mypre = document.getElementById("output"); 
   mypre.innerHTML = ''; 
   Sk.pre = "output";
   Sk.configure({output:outf, read:builtinRead}); 
   (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
   var myPromise = Sk.misceval.asyncToPromise(function() {
       return Sk.importMainWithBody("<stdin>", false, prog, true);
   });
   myPromise.then(function(mod) {
       console.log('success');
   },
       function(err) {
       console.log(err.toString());
   });
} 



<script>
function clearit(){ 
   var prog = document.getElementById("yourcode").value; 
   var mypre = document.getElementById("output"); 
   <textarea id="yourcode" cols="40" rows="10">
print("Hello World")
</textarea>
} 
</script>




</script> 
<h3>Try This</h3> 
<form> 
<textarea id="yourcode" cols="40" rows="10">
print("Hello World")
</textarea><br /> 
<button type="button" onclick="runit()">Run</button> 
</form> 
<p>Output below</p>
<button type="button" onclick="clearit()">Clear</button> 
<pre id="output" ></pre> 
<!-- If you want turtle graphics include a canvas -->
<div id="mycanvas"></div> 
  <script src="js/skulpt.min.js" type="text/javascript"></script>
  <script src="js/skulpt-stdlib.js" type="text/javascript"></script>
</body>
</html>

I also tried some other iterations of the function, see below.

<script>
function clearit(){ 
   var prog = document.getElementById("yourcode").value; 
   var mypre = document.getElementById("output"); 
   mypre.innerHTML = 'TRY SOME NEW CODE'; 
   <textarea id="yourcode" cols="40" rows="10">
print("Hello World")
</textarea>
} 
</script>

To clarify: The mypre.innerHtml worked...but not clearing the textbox with the code. The part I want to implement is to clear the textarea. If I remove the part with <textarea id..) etc the code works fine, and also clears the OUTPUT console. I need the next bit (clearing the textarea) working.

Solution

Your function should look like this:

function clearit(){
    document.getElementById('yourcode').value = '';
    document.getElementById('output').innerHTML = '';
}

You also have too many script tags, remove the ones around the clearit() function.