Why is my “Clear” button not doing anything?

I tried creating a Clear button that clears stuff from a form, but it does nothing. The button is there, but when I click on it, nothing happens. How could I make it work properly, by still using JavaScript, and not HTML, for that part?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Blog</title>

    <link rel="stylesheet" href="about.css">
</head>

<body>
    <header>
        <figure id="hp">
            <a href="portofolio.html"><img src="img/computer.png" width="75" height="75"></a>
        </figure>

        <h1 id="title">Blog</h1>
    </header>

    <form>
        <legend> Add Blog </legend>

        <article id="form">
            <input type="text" name="title" placeholder="Title">
        </article>

        <article>
            <textarea rows="10" name="txt" placeholder="Enter your text here"></textarea>
        </article>

        <input type="button" onclick="clear()" value="Clear">
    </form>

    <script>
        function clear()
        {
            document.getElementById("form").reset();
        }
    </script>

    <footer>
        <figure id="ar">
            <a href="contact.html"><img src="img/back.png" width="75" height="75"></a>
        </figure>
    </footer>
</body>
</html>

Answer

There are 2 major issues:

  1. id="form" should be assigned to the <form> element;
  2. "clear" is a occupied name in window object and is not suitable for function definition.

Check the code snippet below, with ‘form’ id assigned to the form, and the function name changed to ‘clearForm’.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Blog</title>

    <link rel="stylesheet" href="about.css">
</head>

<body>
    <header>
        <figure id="hp">
            <a href="portofolio.html"><img src="img/computer.png" width="75" height="75"></a>
        </figure>

        <h1 id="title">Blog</h1>
    </header>

    <form id="form"> 
        <legend> Add Blog </legend>

        <article>
            <input type="text" name="title" placeholder="Title">
        </article>

        <article>
            <textarea rows="10" name="txt" placeholder="Enter your text here"></textarea>
        </article>

        <input type="button" onclick="clearForm();" value="Clear">
    </form>

    <script>
        function clearForm()
        {
            document.getElementById("form").reset();
        }
    </script>

    <footer>
        <figure id="ar">
            <a href="contact.html"><img src="img/back.png" width="75" height="75"></a>
        </figure>
    </footer>
</body>
</html>