title: Can't get data-* value from html in javascript
body: <p>I am learning to build a e-commerce site using django , while adding add-to-cart functionality
  I couldn't pass product ID to js file. And I am new to javascript
  cart.js</p>
  <pre><code>var updateBtn = document.getElementsByClassName('update-cart')
  
  for (var i=0; i&lt;updateBtn.length; i++){
      updateBtn[i].addEventListener('click',function(){
          var productId = this.dataset.product
          var action = this.dataset.action
          console.log('productId:',productId, 'action:',action )
  
          })
  
  }
  </code></pre>
  <p>product.html</p>
  <pre><code>&lt;div class=&quot;simpleCart_shelfItem&quot;&gt;
      &lt;p&gt;&lt;span&gt;$320&lt;/span&gt; &lt;i class=&quot;item_price&quot;&gt;RS.{{product.price}}&lt;/i&gt;&lt;/p&gt;
      &lt;p&gt;&lt;a data-product={{product.id}} data-action=&quot;add&quot; class=&quot;update-cart&quot; &gt;Add to Cart&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>attachment in base.html</p>
  <pre><code>&lt;script src=&quot;{% static 'store/js/cart.js' %}&quot;&gt;&lt;/script&gt;
  </code></pre>