Question

尝试调用 js 函数时，链接元素的 onClick 不起作用（未捕获的 TypeError：无法将属性“onclick”设置为 null）

2019-01-16

137

javascript onclick modelattribute

在这里，我尝试在单击图标时向我的 spring 控制器发送 http 请求，该图标会随模型属性的验证一起显示。

    <div class="col-sm-4 col-sm-offset-1 page-title-section"></div>
      <c:if test="${viewUsers}">
        <div class="col-sm-4 page-actions-section">
            <div class="page-actions">
                <div class="page-action">
                        <a id="loadUserIcon">
                            <i class="fa fa-plus fa-2x"></i>
                            <h5>Add User</h5>
                        </a>
                </div>
            </div>
        </div>
        </c:if>
        <c:if test="${viewRoles}">
            <div class="col-sm-4 page-actions-section">
                <div class="page-actions">
                    <div class="page-action">
                        <a id="loadRoleIcon">
                            <i class="fa fa-plus fa-2x"></i>
                            <h5>Add Role</h5>
                        </a>
                    </div>
                </div>
            </div>
        </c:if>
    </div>

单击图标后发送请求的 js：

    (function() {
    document.getElementById("loadUserIcon").onclick = function() {
        window.location = 'loadUser?id=' + 0;
    };
})();

   (function() {
    document.getElementById("loadRoleIcon").onclick = function() {
        window.location = 'loadRole?id=' + 0;
    };
})();

因此，现在会随每个模型属性验证显示单独的图标，并且单击“添加用户”图标后会调用第一个函数，但即使随模型属性验证显示图标，我似乎也无法调用第二个函数。这里可能出了什么问题？

单击“添加角色”图标后控制台上出现的错误：

Uncaught TypeError: Cannot set property 'onclick' of null
at load:496
at load:500

这些行号指向第二个 js 函数

Answer 1

控制台上有任何错误吗？

您将脚本放在哪里？
您应该将它们放入 body.onload 处理程序中或结束标记 </body> 之前。

Answer 2

在 </body> 标签下方包含您的 JavaScript 代码，或在 DOM ready 或 onload 时加载函数。

我为 JSFiddle 稍微修改了一下代码，它运行良好，请查看此处： https://jsfiddle.net/045L2xvj/

<div class="col-sm-4 col-sm-offset-1 page-title-section"></div>

        <div class="col-sm-4 page-actions-section">
            <div class="page-actions">
                <div class="page-action">
                        <a href="#" id="loadUserIcon">
                            <h5>Add User</h5>
                        </a>
                </div>
            </div>
        </div>


            <div class="col-sm-4 page-actions-section">
                <div class="page-actions">
                    <div class="page-action">
                        <a href="#" id="loadRoleIcon">
                            <h5>Add Role</h5>
                        </a>
                    </div>
                </div>
    </div>

以及 JS 代码：

(function() {
    document.getElementById("loadUserIcon").onclick = function() {
        alert('Add user');
    };
})();

   (function() {
    document.getElementById("loadRoleIcon").onclick = function() {
       alert('Add role');
    };
})();

Answer 3

我只需要用模型属性验证包装 js 函数来消除元素变为空的情况。

<c:if test="${viewUsers}">
   <script>
        document.getElementById('loadUserIcon').onclick = function () {
            window.location = 'loadUser?id=' + 0;
        };
   </script>
</c:if>

<c:if test="${viewRoles}">
   <script>
        document.getElementById('loadRoleIcon').onclick = function () {
            window.location = 'loadRole?id=' + 0;
        };
   </script>
</c:if>