Javascript Javascript如何制作重置按钮
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6599156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript how to make a reset button
提问by Bulvak
Once a user enters lets say 5 numbers into that list I want to have a reset button so if the user wants to delete them all instantly they can click reset which should delete the entire list....
一旦用户在该列表中输入了 5 个数字,我想要一个重置按钮,因此如果用户想立即删除它们,他们可以单击重置,这将删除整个列表....
I have tried making a reset button with a reset function that fetches the element by id and tries to delete it but it did not quite work so I am hoping someone here knows how to do that...
我曾尝试使用重置功能制作一个重置按钮,该功能通过 id 获取元素并尝试删除它,但它并没有完全奏效,所以我希望这里有人知道如何做到这一点......
here is the fiddle http://jsfiddle.net/bikbouche1/QVUHU/67/
回答by Cory W.
Don't forget that you could always just use a simple
不要忘记你总是可以只使用一个简单的
<input type="reset" value="Reset">
if you want to clear the entire form. Note that you'll need to move those inputs that are currently outside of the form tags in your fiddle to within the form tags for this to work.
如果你想清除整个表格。请注意,您需要将当前位于 fiddle 中表单标签之外的那些输入移动到表单标签内才能使其工作。
Here's an updated fiddle.
这是一个更新的小提琴。
Also note that nrabinowitz's answer won't work for two reasons. First of all, the incorrect ID was given ("numbers" instead of "number") and also, .innerHTML will notwork for an input field. Instead you should use:
另请注意,nrabinowitz 的答案不起作用有两个原因。首先,给出了错误的 ID(“数字”而不是“数字”),而且 .innerHTML不适用于输入字段。相反,您应该使用:
document.getElementById("reset").onclick = function() {
document.getElementById("number").value = "";
};
An updated, working version of his fiddle is here.
他的小提琴的更新的工作版本在这里。
回答by nrabinowitz
See this updated fiddle. Key code:
看到这个更新的小提琴。关键代码:
document.getElementById("reset").onclick = function() {
document.getElementById("numbers").innerHTML = "";
};
To clarify, since this appears to have confused other posters - the "numbers" div
is a placeholder for one or more dynamically-created input
elements, nota reference to the original "number" input
. By setting innerHTML
to ""
, the above code deletes the dynamically created elements entirely - it's not trying to clear their values.
澄清一下,因为这似乎混淆了其他海报 - “数字”div
是一个或多个动态创建的input
元素的占位符,而不是对原始“数字”的引用input
。通过设置innerHTML
为""
,上面的代码会完全删除动态创建的元素 - 它不会试图清除它们的值。