Question

大家好，我正在用JavaScript帮助一个朋友，这是一个不寻常的问题。用于清除表单页面的clear()函数不会导致单击按钮时页面上的对象清除。但它通过控制台运行。这里有什么问题？以下是该网站的代码：

    <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>

Answer 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>

使用此功能并同时启动表单标记<form>并结束表单标记</form>。然后这个清除按钮工作。

同样关闭<option>这样的</option>

Answer 2

将clear()的函数名称替换为其他名称，例如reset()或者更好，使用Hamza Zafeer指出的内置重置功能。</ p>

为什么需要重命名clear()？因为函数clear()已在内联事件处理程序中定义。见Is "clear" a reserved word in Javascript?

Answer 3

尝试在清除按钮中添加ID并附加活动

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


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

Answer 4

Clear()本身只是清除控制台。快速搜索MDN，您可以看到它也是文档的折旧方法。

请尝试使用location.reload()

clear（）函数不能与onClick一起使用，只能通过控制台

4 个答案: