Why aren't my onclick events working? : <p>Here is a snippet of my code on <a href="https://jsfiddle.net/dreami/jy69s6r3/2/" rel="nofollow">jsfiddle</a>.</p>

<p>I want the "+ Create Forum" button to show the form, "Cancel" button to reset the form and hide it, and if you want to see the form, delete "style="display: none".</p>

<p>I used a lot of examples out of w3schools and I have tried to use all its examples of writing a show and hide, one of the resets worked but it was a onclick="this.reset()" which wasn't what I wanted because I wanted it to hide too.</p>

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

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

function clearing() {
document.getElementById("forumForm").reset();
}
&lt;/script&gt;
</code></pre>
