2016-06-08 48 views
1

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

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

+0

'<按钮类型= “复位” 值= “清除”>清除'使用此。 –

+0

我们之前尝试过,没有运气...... – nsakinejad

回答

1

替换函数名称clear()使用其他名称,例如reset()或更好,请使用Hamza Zafeer指出的内置重置功能。

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

+0

感谢您帮助我...... :) – nsakinejad

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>

1

尝试将ID添加到您的清除按钮,并附加一个事件

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


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

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

尝试代替使用location.reload()

相关问题