You have an un-necessary HTML tag textarea inside your clearit function, which was causing an error (check in console). It is not required since you already have textarea in your HTML block. Try below (It is not full code only clearit implementation):
function clearit() {
var prog = document.getElementById("yourcode").value;
var mypre = document.getElementById("output");
document.getElementById("yourcode").value = '';
}
<h3>Try This</h3>
<form>
<textarea id="yourcode" cols="40" rows="5">
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>
</body>
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.
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.
sorry – please refer to the last function – scroll down to the end of the question (updated). I’ll aslo update the question
Have edited question to reflect the code now.
@gkulshrestha – if you read the question you’ll see that it already works fine without that. My question isn’t about the bit that resets the output code but about clearing the textbox. Please post an answer if you know, else the comment isn’t particularly useful as it suggests you haven’t understood the question? Thanks for trying though! 🙂
