Элемент ссылки onClick for не работает при попытке вызвать функцию js (Uncaught TypeError: Невозможно установить свойство 'onclick' для null)

Question

Здесь я пытаюсь отправить 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

Включите ваш код JavaScript, либо ниже тега </body>, либо загрузите функции при 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 2

Мне просто нужно было также обернуть 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>

Answer 3

Любая ошибка на консоли?

Где вы положили сценарии?
Вы должны поместить их в обработчик body.onload или непосредственно перед конечным тегом </body>.