2016-03-09 4 views
0

Я смотрел на многие другие темы здесь, похожие на мою проблему, но ни один из ответов не работает для меня. Я пытаюсь вызвать функцию javascript при нажатии кнопки, но ничего не делает. Я попытался изменить вызов на onclick="javascript:ClearFields();" и onclick="ClearFields()", и он тоже не работает. я должен использовать кнопку (не отправить) вызова JavaScript Мой код является JSP:jsp onclick не вызывает функцию javascript

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Calculator</title> 
    </head> 
    <body> 
     <!-- if the user is logged in then we need to render one version of the page 
     consequently if the user is logged out we need to render a 
     different version of the page --> 

     <script type="text/javascript"> 
      function ClearFields() { 
       document.getElementById("num1").value = ""; 
       document.getElementById("num2").value = ""; 
       document.getElementById("operator").value = "+"; 
     } 
     </script> 

     <c:choose> 
      <c:when test="${empty user}"> 
       <p> 
        ${msg} <br/> 
        Would you like to log in? <br/> 
        <a href="${login_url}">Sign in or register</a> <br/> 
       </p> 
      </c:when> 
      <c:otherwise> 
       <p> 
        Welcome ${user.email} 
       <p/> 
       <p><h1>Calculator</h1></p> 
       <!-- form of basic input types --> 
       <form action="/" method="post"> 
        <table border="0"> 
         <tr><td> 
          Number 1: <input type="text" name="num1" value="${ans}"/><br/> 
         </td><td> 
          Number 2: <input type="text" name="num2" /><br/> 
         </td></tr> 
         <tr><td colspan=2 align=center> 
          <select name="operator"> 
           <option value="+"> + </option> 
           <option value="-"> - </option> 
           <option value="*"> * </option> 
           <option value="/">/</option> 
          </select> 
         </td></tr> 
         <tr><td align=center> 
          <!-- Button to submit the form to the servlet when clicked --> 
          <input type="submit" value="Calculate"/><br/> 
         </td> 
         <td align=center> 
          <input type="button" onclick="ClearFields();" value="Clear"/><br/> 
          <!-- <input type="button" onclick="ClearFields();" value="Clear"/><br/> --> 
         </td></tr> 
         <tr><td colspan=2> 
          <h1> ${msg}</h1> 
         </td></tr> 
        </table> 
       </form> 
       <p> 
        You can signout <a href="${logout_url}">here</a> 
       </p> 
      </c:otherwise> 
     </c:choose> 
    </body> 
</html> 

Сгенерированный HTML является

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Calculator</title> 
    </head> 
    <body> 
     <!-- if the user is logged in then we need to render one version of the page 
     consequently if the user is logged out we need to render a 
     different version of the page --> 

     <script type="text/javascript"> 
     function ClearFields() { 
      document.getElementById("num1").value = ""; 
      document.getElementById("num2").value = ""; 
      document.getElementById("operator").value = "+"; 
     } 
     </script> 




       <p> 
        Welcome [email protected] 
       <p/> 
       <p><h1>Calculator</h1></p> 
       <!-- form of basic input types --> 
       <form action="/" method="post"> 
        <table border="0"> 
         <tr><td> 
          Number 1: <input type="text" name="num1" value=""/><br/> 
         </td><td> 
          Number 2: <input type="text" name="num2" /><br/> 
         </td></tr> 
         <tr><td colspan=2 align=center> 
          <select name="operator"> 
           <option value="+"> + </option> 
           <option value="-"> - </option> 
           <option value="*"> * </option> 
           <option value="/">/</option> 
          </select> 
         </td></tr> 
         <tr><td align=center> 
          <!-- Button to submit the form to the servlet when clicked --> 
          <input type="submit" value="Calculate"/><br/> 
         </td> 
         <td align=center> 
          <input type="button" onclick="ClearFields();" value="Clear"/><br/> 
         </td></tr> 
         <tr><td colspan=2> 
          <h1> Welcome to the Calculator</h1> 
          </td></tr> 
         </table> 
       </form> 
       <p> 
        You can signout <a href="/_ah/logout?continue=%2F">here</a> 
       </p> 


    </body> 
</html> 

Любые идеи, где я неправильно? Не может быть, чтобы страница не была повторно отправлена? Это кажется.

ответ

1

Ваш JavaScript:

document.getElementById("num1").value = ""; 

Ваш HTML:

<input type="text" name="num1" value=""/> 

getElementById получает элемент его ID, и ваш элемент не имеет идентификатора. Вам нужно добавить атрибут id.

+0

Большое вам спасибо. Это всегда простые вещи. Это сводило меня с ума. – user2870367

Смежные вопросы