Почему стиль <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-бот написал его за вас, и вы сможете изучить его паттерны. Надеюсь, это поможет.... Спасибо