title: Django adding eventlistener to a for...loop on template tag
body: <p>I'm trying to add a event listener to a list of links created by django template tag.</p>
  <p>It should take the list of objects with class <code> div.cat-link</code> and add an eventlistener to each one to display the matching id of <code> div.cat-select</code></p>
  <p>html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;cat&quot;&gt;
      &lt;div class=&quot;cat-links&quot;&gt;
          {% for t in tags %}
          &lt;div id=&quot;{{t|lower}}&quot; class=&quot;cat-link&quot;&gt;
              &lt;a class=&quot;cat&quot; href=&quot;{% url 'list_product1' t %}&quot;&gt;{{t}}&lt;/a&gt;
          &lt;/div&gt;
  
          {% endfor %}
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;cat-list&quot;&gt;
      {% for t in tags %}
      &lt;div class=&quot;cat-select&quot; id=&quot;cat_{{t|lower}}&quot;&gt;
          {% for p in t.produto_set.all %}
          &lt;div class=&quot;cat-product&quot;&gt;
              &lt;!--IMAGES--&gt;
              &lt;div class='img'&gt;
                  &lt;amp-carousel lightbox controls autoplay delay=&quot;3000&quot; width=&quot;250&quot;
                      height=&quot;250&quot; layout=&quot;responsive&quot; type=&quot;slides&quot;&gt;
                      {% for pic in p.images.all %}
                      &lt;amp-img src=&quot;{{ pic.image.url }}&quot; width=&quot;250&quot; height=&quot;150&quot;
                          layout=&quot;responsive&quot; alt=&quot;{{ p.nome }}&quot;&gt;
                      &lt;/amp-img&gt;
                      {% endfor %}
                  &lt;/amp-carousel&gt;
              &lt;/div&gt;
              &lt;!-- INFOS --&gt;
              &lt;div class='infos-prod'&gt;
                  &lt;a class='cat-product' href=&quot;{% url 'detail_product' p.id %}&quot;&gt;
                      &lt;h3&gt;{{p.nome}} &lt;/h3&gt;
                  &lt;/a&gt;
                  &lt;a class='cat-product' href=&quot;{% url 'detail_product' p.id %}&quot;&gt;
                      R$: {{ p.preco }}
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          {% endfor %}
      &lt;/div&gt;
      {% endfor %}
  &lt;/div&gt;
  </code></pre>
  <p>JavaScript:</p>
  <pre class="lang-javascript prettyprint-override"><code>&lt;script id=&quot;cat-script&quot; type=&quot;text/javascript&quot; target=&quot;amp-script&quot;&gt;
  
      function Showing(one) {
          var v1 = document.getElementById(one);
          v1.style.display = &quot;flex&quot;;
  
      };
      function Hiding(one) {
          var v1 = document.getElementById(one);
          v1.style.display = &quot;none&quot;;
  
      };
  
  
      function Category() {
          var v1 = document.getElementsByClassName('cat-link');
          for (o in v1) {
              var v2 = 'cat_' + v1[o].getAttribute('id')
              v1[o].addEventListener('mouseover', function () { Showing(v2) });
              v1[o].addEventListener('mouseout', function () { Hiding(v2) });
          };
      };
  
      Category()
  
  &lt;/script&gt;
  </code></pre>
  <p>It should take the list of objects with class <code> div.cat-link</code> and add an eventlistener to each one to display the matching id of <code> div.cat-select</code></p>
  <p>I'm getting the error:</p>
  <blockquote>
  <p>Uncaught TypeError: v1[o].getAttribute is not a function</p>
  </blockquote>
  <p>and nothing is happening.</p>