[英]Clearing a text box using a JavaScript function
我有以下代碼用於在瀏覽器中運行 Python 的 skulpt 的 jscript 實現。 我添加了一個“清除”按鈕,當單擊它時,我希望從屏幕上刪除/清除文本框中的文本以及任何“運行”代碼。
下面顯示了我的嘗試(功能“clearit”),但它不起作用。 任何建議 - 請發布該功能的代碼,並解釋我做錯了什么/更正。
相關功能
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 工作......但沒有用代碼清除文本框。 我要實現的部分是清除textarea。 如果我刪除帶有 <textarea id..) 等的部分,代碼工作正常,並且還會清除 OUTPUT 控制台。 我需要下一位(清除 textarea)工作。
您的clearit
函數中有一個不必要的 HTML 標記textarea
,這導致了錯誤(在控制台中檢查)。 它不是必需的,因為您的 HTML 塊中已經有textarea
。 試試下面(它不是完整的代碼,只有clearit
實現):
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>
您的函數應如下所示:
function clearit(){
document.getElementById('yourcode').value = '';
document.getElementById('output').innerHTML = '';
}
你也有太多的腳本標簽,刪除 clearit() 函數周圍的那些。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.