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

Question

在这里，我试图一旦单击显示了带有模型属性验证的图标，就向我的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函数，以消除元素变为null。

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