Why is my "Clear" button not doing anything?

Question

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>

Does this answer your question? [Is "clear" a reserved word in Javascript?](https://stackoverflow.com/questions/7165570/is-clear-a-reserved-word-in-javascript) — Ivar, Apr 13 '21 at 06:59

coderLMN · Accepted Answer · 2021-04-13T07:54:58.837

There are 2 major issues:

id="form" should be assigned to the <form> element;
"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>

score 0 · Answer 2 · answered Apr 13 '21 at 08:25

0

change form to form id="form"
see that picture I attached. thank you...

https://i.stack.imgur.com/Eff3k.png

answered Apr 13 '21 at 08:25

Azad Hossain

1
3

[How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) + Don't post images with relevant informations (-> [Why not upload images of code/errors when asking a question?](https://meta.stackoverflow.com/questions/285551/why-not-upload-images-of-code-errors-when-asking-a-question/285557#285557)), use a code block to show the changes (-> [How do I format my posts using Markdown or HTML?](https://stackoverflow.com/help/formatting)). – Andreas Apr 13 '21 at 09:18

Why is my "Clear" button not doing anything?

2 Answers2