使用 JavaScript 函数清除文本框

Question

我有以下代码，用于在浏览器中运行 Python 的 skulpt 的 jscript 实现。我添加了一个“清除”按钮，单击它时，我希望文本框中的文本以及任何“运行”代码从屏幕上显示为 deleted/cleared。

下面显示了我的尝试（函数“clearit”），但它不起作用。任何建议 - 请 post 为该功能编写代码，并解释我在做什么 wrong/corrections。

相关函数

   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>
}

我在下面粘贴了完整的代码，因为这可能是因为我将函数放在了错误的位置。一旦我添加了这个功能，它就完全停止工作了。

完整代码 (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>

我还尝试了该函数的其他一些迭代，见下文。

<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>

澄清一下：mypre.innerHtml 有效...但无法使用代码清除文本框。我要实现的部分是清除文本区域。如果我删除带有 </section> <div> <section class="answer"> <p>您的函数应如下所示：</p> <pre><code>function clearit(){ document.getElementById('yourcode').value = ''; document.getElementById('output').innerHTML = ''; } </code></pre> <p>您的脚本标签也太多了，请删除 clearit() 函数周围的标签。</p> </section> <section class="answer"> <p>您的 <code>clearit</code> 函数中有一个 un-necessary HTML 标记 <code>textarea</code>，它导致了错误（在控制台中检查）。它不是必需的，因为您的 HTML 块中已经有 <code>textarea</code>。试试下面（这不是完整的代码 <code>clearit</code> 实现）：</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre><code>function clearit() { var prog = document.getElementById("yourcode").value; var mypre = document.getElementById("output"); document.getElementById("yourcode").value = ''; } </code></pre> <pre><code><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>  <div id="mycanvas"></div> </body> </code></pre> </div> </div> </p> </section> </div> </div> <div class="line"></div> <div id="footer">©2023 WhoseBug</div> </body> </html>

使用 JavaScript 函数清除文本框

Clearing a text box using a JavaScript function

html

javascript

textbox

skulpt