Почему стиль <div> на странице не обновляется?

Я делаю проект на Django. столкнулся с проблемой. У меня есть контейнеры div с динамическими идентификаторами. Я загружаю ID из базы данных и автоматически выгружаю его в HTML. Вот пример динамических идентификаторов для контейнеров div:

    <div id="replyLikesDiv">
                <img id="replyReviewsImg" src="{% static 'images/icons8-reply-arrow-50.png' %}">
                <div id="replyReviewsDiv">Ответить</div>

                <img class='likesReviewsImg' id="likesReviewsImg{{ REVIEWS_IDS }}" onclick="likesReviewsImgClick(this)" src="{% static 'images/icons8-facebook-like-50.png' %}">

                <div  class='likesReviewsDiv' id="likesReviewsDiv{{ REVIEWS_IDS }}" onclick="likesReviewsDivClick(this)">...</div></div>

<div class="likeAuthorizationDiv" id='likeAuthorizationDiv{{ REVIEWS_IDS }}'>

                <div id="likeAuthorizationMessage">Пожалуйста, авторизуйтесь, чтобы продолжить.</div>  
 
        <div  id="sendReviewBtnDiv2">
            <div id="sendReviewBtn2"">Закрыть</div>

            </div>
            </div>

REVIEWS_IDS автоматически загружается из базы данных и вставляется с помощью шаблонизатора Jinja. REVIEWS_IDS - это целочисленное значение 1,2,3,4..., которое не повторяется, поэтому все идентификаторы уникальны.

По замыслу, когда вы нажимаете на id="likesReviewsDiv{{ REVIEWS_IDS }}", вызывается функция likesReviewsDivClick(). Она выглядит следующим образом:

function likesReviewsDivClick(el){
    var id = el.id;
    id = Number(id.replace(/[^0-9]/g, ''));
    id = 'likeAuthorizationDiv' + id;
    var element = document.getElementById(id);
    element.style.visibility = 'hidden';

    alert(element.style.visibility);
}

В функции я считываю ID и подставляю его в likeAuthorizationDiv. Затем я получаю в функции нужный мне элемент и пытаюсь изменить его стиль на hidden. Стиль меняется в оповещении, но не на странице. Что может быть не так?

Я пытался изменить стиль разными способами, но так и не понял, как это сделать. Как я понимаю, проблема в DOM.

EDIT: Итак, если я помещу атрибут onclick в id='likeAuthorizationDiv{{ REVIEWS_IDS }}' и сделаю функцию likeAuthorizationDivClick(el), контейнер div станет неуязвимым. Но это не решение для меня.

HTML:

<div class="likeAuthorizationDiv" onclick='likeAuthorizationDivClick(this)' id='likeAuthorizationDiv{{ REVIEWS_IDS }}' >

JS (эта функция работает, но не является решением):

function likeAuthorizationDivClick(el){
    el.style.visibility = 'hidden';
}

Но это не работает (это может быть решением для меня):

function likeAuthorizationDivClick(el){
    var id = el.id;
    var element = document.getElementById(id);
    element.style.visibility = 'hidden';
}

Давайте посмотрим, Убедитесь, что ваши серверы работают должным образом, так как это может быть и проблемой сервера. Попробуйте такие приложения, как VS Code или Scrimba, они предоставляют окно вывода рядом с кодом, чтобы вы могли следить за изменениями на каждом шаге. Другой проблемой может быть правильное связывание элементов в разных файлах. Убедитесь, что вы правильно связываете страницы. А лучше всего попробуйте написать код заново или попробуйте, чтобы AI-бот написал его за вас, и вы сможете изучить его паттерны. Надеюсь, это поможет.... Спасибо

Вернуться на верх