1

Тема: Не відображає div на сайті [django]

<div class="p-6 ">
    <h2 class="text-2xl text-amber-300">{{item.name}}</h2>
    <p class="text-gray-400">Donation: {{item.donation}}</p>
    <div id="myProgress_{{ item.id }}" style="width: 100%; height: 30px; background-color: grey;">
        <div id="myBar_{{ item.id }}" style="width: 1%; height: 30px; background-color: green;"></div>
    </div>
</div>

<script>
    var myProgress = document.getElementById("myProgress_{{ item.id }}");
    var myBar = document.getElementById("myBar_{{ item.id }}");
    console.log(myBar);

    var progress = {{ item.progress }};
    var donation = {{ item.donation }};

    var width = Math.min(100, Math.round((progress * 100) / donation)) + "%";
    console.log(width);
    
    myBar.style.width = width;
    myProgress.innerHTML = width;
    
</script>

не відображає дів id="myBar_{{ item.id }}, в Console виводить його, а в Elements його не відображає.
Якщо закоментити скрипт відображає все добре, якщо виводити два діва по окрему все теж правильно працює, але як тільки виводити один в одному, то виводиться один. Всі значення передаються правильно(перевірено).
Здавалося така елементарна проблема, але не можу вирішити її дуже довго.

2

Re: Не відображає div на сайті [django]

notsemka написав:
    <div id="myProgress_{{ item.id }}" style="width: 100%; height: 30px; background-color: grey;">
        <div id="myBar_{{ item.id }}" style="width: 1%; height: 30px; background-color: green;"></div>
    </div>

не відображає дів id="myBar_{{ item.id }}

В специфікації HTML написано що id не може містити пробіл (' ') чи фігурну дужку ('{', '}') :

w3.org (en)
  • ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

3

Re: Не відображає div на сайті [django]

Але чому, якщо окремо виводити то все працює. {{ item.id }} Воно повинно сприймати як цифру, хіба ні, це ж django шаблон.
https://drive.google.com/drive/folders/1IOLu-2vHdTTXUktilBwYiZ8DdS0HILTe(посилання на гугл диск зі скрінами, що видає консоль і як в елементах воно бачить це)

4

Re: Не відображає div на сайті [django]

notsemka написав:

це ж django шаблон

Заголовок оновлено.

notsemka написав:

посилання на гугл диск

drive.google.com написав:

Не вдається ввійти в обліковий запис

Який код отримує web переглядач ? { firefox: "програмний код сторінки", chrome: "джерело сторінки" }

5

Re: Не відображає div на сайті [django]

обновив диск, пробуйте ще раз.
https://lh3.googleusercontent.com/u/0/d/1vNSsCYV4IXeR_c-zjE-4U4bTOX6Bv04u=w1842-h992-iv1
https://lh3.googleusercontent.com/u/0/d/1lxNvd7umRuuo6xVRQig03sPaYa-e0h2w=w1842-h992-iv1

leofun01 написав:

Який код отримує web переглядач ? { firefox: "програмний код сторінки", chrome: "джерело сторінки" }

не зрозумів питання

6

Re: Не відображає div на сайті [django]

notsemka написав:
    <div id="myProgress_5">
        <div id="myBar_5"></div>
    </div>
<script>
    myProgress.innerHTML = width;
</script>

Тепер бачу. Диви, innerHTML перед замінойу містить весь '<div id="myBar_5"></div>'. Далі innerHTML = width; - цим кодом ти просиш web переглядач повністю замінити весь вміст значеням width, як наслідок всі внутрішні tag'и (div#myBar_5) будуть видалені з DOM.

dev.w3.org (en)

Remove the child nodes of the node whose innerHTML attribute is being set, firing appropriate mutation events.

7

Re: Не відображає div на сайті [django]

Дійсно, прибрав InnerHTML і все коректно відображає)