时间戳

首页 > 解决方案 > 尝试调用 js 函数时，链接元素的 onClick 不起作用（未捕获的 TypeError：无法设置属性 'onclick' of null）

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

问题描述

在这里，一旦单击显示模型属性验证的图标，我将尝试向我的 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 函数

标签： javascriptonclickmodelattribute

解决方案

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

我为 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');
    };
})();

推荐阅读