clear() function not working with onClick, only through console

Question

Hello there everyone, I am helping a friend with JavaScript and there is an unusual problem. The clear() function used to clear the form page is not causing the objects on the page to clear when the button is clicked. It runs through console, though. What is the problem here? Here is the code for the site:

    <html>
    <head>
    <title>UNDERTALE</title>
    <style>
        @font-face {
            font-family: Undertale;
            src: url("assets/DTM-Mono.otf") format("opentype");
        }
        body {
            font-family: Undertale;
            font-size: 24px;
            color: #FFFFFF;
        }

        table {
            font-family: Undertale;
            font-size: 24px;
            color: #FFFFFF;
        }
    </style> 
    <script>
        function validateCheckBox(){
            if(document.getElementsByName("check")[0].checked == true) { return true; }
            if(document.getElementsByName("check")[1].checked == true) { return true; }
            if(document.getElementsByName("check")[2].checked == true) { return true; }
            if(document.getElementsByName("check")[3].checked == true) { return true; }
            return false;
        }
        function validateDropdown(){
            if(document.getElementsByName("select")[0].selectedIndex == 0) { return false; }
            return true;
        }
        function validateRadio(){
            if(document.getElementsByName("radio")[0].checked == true) { return true; }
            if(document.getElementsByName("radio")[1].checked == true) { return true; }
            if(document.getElementsByName("radio")[2].checked == true) { return true; }
            if(document.getElementsByName("radio")[3].checked == true) { return true; }
            return false;
        }
        function validateTextArea(){
            if(document.getElementsByName("textarea")[0].value == "") { return false; }
                return true;
        }
        function submit(){
            if(validateCheckBox() == false) { alert("Please complete the first question."); return; }
            if(validateDropdown() == false) { alert("Please complete the second question."); return; }
            if(validateRadio() == false) { alert("Please complete the third question."); return; }
            if(validateTextArea() == false) { alert("Please complete the fourth question."); return; }
            alert("Form submitted successfully!");
        }
        function clear(){
            document.getElementsByName("check")[0].checked = false;
            document.getElementsByName("check")[1].checked = false;
            document.getElementsByName("check")[2].checked = false;
            document.getElementsByName("check")[3].checked = false;
            document.getElementsByName("select")[0].selectedIndex = 0;
            document.getElementsByName("radio")[0].checked = false;
            document.getElementsByName("radio")[1].checked = false;
            document.getElementsByName("radio")[2].checked = false;
            document.getElementsByName("radio")[3].checked = false;
            document.getElementsByName("textarea")[0].value = "";
            return;
        }
    </script>
    </head>
    <body bgcolor="#000000">
        <center>
            <table width="1000px">
            <tr><td>
            <center>
                <img src="assets/feedback.png" width="700px">
            </center>
            <tr><td>
            <br>
            <center>
                1. What did you find helpful on this website?<br>
                <input type="checkbox" name="check">About</input>
                <input type="checkbox" name="check">Story</input>
                <input type="checkbox" name="check">Main Characters</input>
                <input type="checkbox" name="check">Locations</input>
                <br><br>
                2. Which page should I add more information?<br>
                <select name="select">
                    <option>
                    <option>About
                    <option>Story
                    <option>Main Characters
                    <option>Locations
                    <option>None
                </select>
                <br><br>
                3. Which page did you find the most helpful?<br>
                <input type="radio" name="radio">About</input>
                <input type="radio" name="radio">Story</input>
                <input type="radio" name="radio">Main Characters</input>
                <input type="radio" name="radio">Locations</input><br><br>
                4. Please leave any other comments about this website here.<br>
                <textarea rows=10 cols=50 name="textarea"></textarea><br><br>
                <button onclick="submit()">Submit</button>
                <button onclick="clear()">Clear</button>
            </center>
        </table>
    </body>
</html>

We tried that before, and no luck... – nsakinejad Jun 08 '16 at 01:38 — nsakinejad, Jun 08 '16 at 01:38

Hamza Zafeer · Answer 1 · 2016-06-08T01:46:31.320

1

<form>
    Your Name:<input type="text">
    <button type="submit" value ="Submit">Submit</button>
    <button type="reset" value ="Clear">Clear</button>
  </form>

<button type="reset" value="Clear">Clear</button>

Use This and Also start Form tag <form>and end Form tag </form> . Then This Clear Button works.

Also Close your <option> like this </option>

edited Jun 08 '16 at 01:46

answered Jun 08 '16 at 01:41

Hamza Zafeer

2,360
13
30
42

score 1 · Accepted Answer · edited May 23 '17 at 12:00

1

Replace the function name for clear() with another name, e.g. reset() or better yet, use the built-in reset functionality as pointed out by Hamza Zafeer.

Why do you need to rename clear()? Because a function clear() is already defined within inline event-handlers. See Is "clear" a reserved word in Javascript?

edited May 23 '17 at 12:00

Community

1
1

answered Jun 08 '16 at 01:52

le_m

19,302
9
64
74

Thanks for helping me out... :) – nsakinejad Jun 08 '16 at 18:05

score 1 · Answer 3 · answered Jun 08 '16 at 02:02

1

try to add an id to your clear button and attach an event

 document.getElementById("btnClear").addEventListener("click", clear);


<button id="btnClear">Clear</button>

answered Jun 08 '16 at 02:02

Jeric Cruz

1,899
1
14
29

score 0 · Answer 4 · answered Jun 08 '16 at 02:15

0

Clear() by itself just clears the console. A quick search of MDN and you can see that it is also depreciated method of the document.

try instead to use location.reload()

answered Jun 08 '16 at 02:15

Robert E DelValle

177
1
10

clear() function not working with onClick, only through console

4 Answers4