Aquí está la plantilla HTML donde se implementa el código javascript dentro del bucle for. Estoy tratando de tomar los datos requeridos de los modelos Django.
{% for other_campaign in other_campaigns %} <div class="container" style="background-color:#f1f1f1"> <div class="row"> <div class="column-33"> <img src="{% if other_campaign.Image %} {{other_campaign.Image.url}} {% else %} {% static './Images/blank.jpg' %} {% endif %}" class="camp_img" alt="App"> </div> <div class="column-66"> <a href="{% url 'detail' other_campaign.id %}" class="victim"><b>Victim: {{other_campaign.Name}}</b></a> <div class="target"><b><i>Target Amount:</i> {{other_campaign.Target}}</b></div> <div class="target"><b></b><i>Collected Amount:</i> {{other_campaign.Collected}}</div> <br> <p><b>Info: {{other_campaign.Info}}</b></p> <br> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> <br> </div> <div class="progress_text">Rs. {{ other_campaign.Collected }} - Done</div> <br> <br> <button class="button"><a href="#" class="donate_here">Donate Here</a></button> <br> <div style="float: right;">Date_added: {{other_campaign.Date_added}}</div> </div> <br> </div> </div>aquí está el código javascript
<!-- progress bar script --> <script> const progress = document.querySelector(".progress-bar") const progpercent = {{other_campaign.Collected}}/{{other_campaign.Target}}; progress.style.width = `${progpercent * 100}%`; </script> {% endfor %}