Question

以下是jsfiddle上我的代码片段。

我想要＆＃34; +创建论坛＆＃34;按钮显示表单，＆＃34;取消＆＃34;按钮重置表单并隐藏它，如果要查看表单，请删除＆＃34; style =＆＃34; display：none＆＃34;。

我在w3schools中使用了很多例子，我尝试使用它所有的编写节目和隐藏的例子，其中一个重置工作但它是onclick =＆＃34; this.reset（）＆＃ 34;这不是我想要的，因为我也想隐藏它。

<html>
<body>
<button class="btn btn-default" type="submit" id="createform">+ Create Forum</button>
<div class="form-group" id="createForum">
<form action="forums.php" method="get" id="forumForm" style="display: none">
<label>Forum name:</label>
<input type="text" class="form-control" id="forumName">
<label>Description:</label>
<textarea class="form-control" rows="5" id="description"></textarea>
<button class="btn btn-danger" type="submit" name="create">Crear</button>
<input type="button" value="Reset Form" onclick="clearing()">
</form>
</div>
</body>

<script type="text/javascript">
$("#createform").click(function() {
$("#forumForm").show();
 });

function clearing() {
document.getElementById("forumForm").reset();
}
</script>

Answer 1

您正在使用jquery，并且您没有将任何jquery库链接到您的html。

尝试在head标记中链接此内容并再次运行代码

 <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

Answer 2

也许，你已经完成了它并且jquery库包含在你的头脑中...但最好先检查一下......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">

此外，将JS与HTML混合在一起并不是一个很好的做法。相反，我建议将JS放在head部分，并在文档准备好后触发代码：

$(document).ready(function(){
    $("#createform").click(function() {
        $("#forumForm").show();
    });
});

https://jsfiddle.net/jy69s6r3/5/

Answer 3

试试这个：

＆＃13;

  
$(document).ready(function(){
 $("#createform").click(function() {
 $("#forumForm").show();
});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<html>
<body>
<button class="btn btn-default" type="submit" id="createform">+ Create Forum</button>
<div class="form-group" id="createForum">
<form action="forums.php" method="get" id="forumForm" style="display: none">
<label>Forum name:</label>
<input type="text" class="form-control" id="forumName">
<label>Description:</label>
<textarea class="form-control" rows="5" id="description"></textarea>
<button class="btn btn-danger" type="submit" name="create">Crear</button>
<input type="button" value="Reset Form" onclick="clearing()">
</form>
</div>
</body>
</html>

＆＃13;

Answer 4

你正在尝试运行jQuery代码，但似乎你没有在你的代码中包含jquery，也没有在你提供的小提琴中。请将此添加到您的头标记

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

再试一次，让我知道。我修改了你的小提琴，请看看 - updated Fiddle

为什么我的onclick事件不起作用？

4 个答案: