Help, please
I need to render in slider dynamic qr-codes.
I receive data from admin model (Django). It work for text, but link for qrs are the same.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
{% for a in advertising %}
<div class="carousel-item carousel-item1 {% if forloop.first %}active{% endif %}" data-bs-interval="2000">
<h3 class="install-app">{{a.advertising_text}}</h3>
<div class="qr-wrapper"></div>
</div>
{% endfor %}
</div>
</div>
And script
qrCodeMaker();
function qrCodeMaker(qr) {
const qrs = document.querySelectorAll(".qr-wrapper");
console.log('qrs', qrs)
qrs.forEach(function (qr) {
q = new QRCode(qr, {
// {% for a in advertising %}
text: "{{a.URL}}",
// {% endfor %}
colorDark: "#002F43",
colorLight: "#F5F7F7"
} )
})
}
2
Answers
so, i have a Carousel with dynamic changing text and qr. Link for qr i add by admin in django. Text changes ok, but qrs render all at ones
I see that you are accessing
a.URL
outside of thefor
loop, which means thata
is not defined. If this is the source of the problem, the following code should fix it:HTML
Javascript