skip to Main Content

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



  1. I see that you are accessing a.URL outside of the for loop, which means that a is not defined. If this is the source of the problem, the following code should fix it:

    HTML

    <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" id="{{a.URL}}"></div>
        </div>
         {% endfor %}
    
        </div>
    </div>
    

    Javascript

    function qrCodeMaker(qr) {
       const qrs = document.querySelectorAll(".qr-wrapper");
       console.log('qrs', qrs)
       qrs.forEach(function (qr) {
            q = new QRCode(qr, {
             text: qr.id,
             colorDark: "#002F43",
             colorLight: "#F5F7F7"
            } )
       })
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search