Question

我在这里看了很多与我的问题相似的其他主题，但没有一个答案适合我。我试图在单击按钮时调用javascript函数，但它什么都不做。我尝试将呼叫更改为onclick="javascript:ClearFields();"和onclick="ClearFields()"，但它也无效。我必须使用一个按钮（不提交）调用javascript 我的jsp代码是：

<%@ 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 test@example.com 
                <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>

我出错的任何想法？可能只是页面没有重新提交？好像是。

Answer 1

您的JavaScript：

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

您的HTML：

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

getElementById通过 id 获取元素，并且您的元素没有任何ID。您需要添加id属性。

jsp onclick没有调用javascript函数

1 个答案: