试图清除HTML中的字段javascript

我正在试着制作一个按钮，用于清理我的页面的特定字段。这是我的，但它不起作用。不知道还有什么要做。有些人试图帮助我赞扬另一个话题，但由于我无法做到这一点，我打开了这个新问题。试图清除HTML中的字段javascript

感谢

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://xmlns.jcp.org/jsf/html"> 
    <h:head> 
     <title>Landing Page</title> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

     <script> 

      $('.clear').on('click', function() { 
       $('#inputFirstName').val(''); 
       $('#inputLastName').val(''); 
       $('#inputEmail').val(''); 
      }); 

     </script> 

     <style> 
      #formTable { 
       /*border: 1px solid black;*/ 
       margin: 0 auto; 
      } 

      #outer { 
       width: 100%; 
       height: 700px; 
       display: flex; 
       align-items: center; 
       /*background-color: gray;*/ 
      }    

      #inner { 
       width: 300px; 
       height: 350px; 
       margin: 0 auto; 
       /*background-color: yellow;*/ 
      } 
     </style> 

    </h:head> 

    <h:body> 

     <div id="outer"> 
      <div id="inner"> 

       <h:form class="signupform"> 

        <p>Sign-up for more:</p> 

        <table id="formTable"> 
         <tr> 
          <td>First Name:</td> 
          <td><h:inputText id="inputFirstName" value="#{visitor.firstName}"/></td> 
         </tr> 
         <tr> 
          <td>Last Name:</td> 
          <td><h:inputText id="inputLastName" value="#{visitor.lastName}"/></td> 
         </tr> 
         <tr> 
          <td>Email:</td> 
          <td><h:inputText id="inputEmail" value="#{visitor.email}"/></td> 
         </tr> 
        </table> 


        <p><h:commandButton id="submit" value="Submit" action="#{visitor.registerVisitor()}"/> 
         <h:outputText id="outputText" value="#{visitor.result}"/></p> 

       </h:form> 

       <button class="clear">Clear</button> 

      </div> 
     </div> 

    </h:body> 
</html>

来源

2017-02-05 user1060551

你打电话之前$('.clear')存在的元素。

因此，您将事件处理程序添加到空集。

您需要在元素之后运行您的<script>块。

来源

2017-02-05 23:17:15 SLaks

莫非你也'$（文件）。就绪（函数（）{/ *代码* /}） ;'？ – Winestone

@slaks你能告诉我究竟在哪里？将它移动到身体内的div后面，但仍然不起作用。 – user1060551

@winestone，对不起，我不是一个JavaScript专家，你可以请发布整个代码？ – user1060551

也许你可以尝试，而不是，：

<script> 

    $('.clear').on('click', function() { 
     $('#inputFirstName').val(''); 
     $('#inputLastName').val(''); 
     $('#inputEmail').val(''); 
    }); 

</script>

而是有：

<script> 
    $(document).ready(function() { 
     $('.clear').on('click', function() { 
      $('#inputFirstName').val(''); 
      $('#inputLastName').val(''); 
      $('#inputEmail').val(''); 
     }); 
    }); 
</script>

来源

2017-02-05 23:35:31 Winestone

感谢您的尝试，但它没有奏效。 – user1060551

@ user1060551尝试在console中加入一个'console.log（$（'＃inputFirstName'））;'在点击函数内部并查看它输出的内容。 – Winestone

试图清除HTML中的字段javascript

回答

相关问题