title: onclick for all buttons with a data attribute
body: <p>I have three different boxes which all have a button inside.</p>
  
  <p>I want to register an <code>onclick</code> event for every button with a specific data attribute.</p>
  
  <p>I've started a jsfiddle, any suggestions?</p>
  
  <p><a href="http://jsfiddle.net/mwils/w6gofb30/" rel="nofollow">http://jsfiddle.net/mwils/w6gofb30/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var buttons = document.querySelectorAll("button[data-donation]");
  
  for (i = 0; i &lt; buttons.length; i++) {
      document.querySelectorAll("button[data-donation]")[i].onclick = console.log(buttons[i]);
  }
  
  function letsGo(init) {
  
      var input = document.body.querySelector("input[name='amount']"),
          amount = parseInt(input.value, 10) * 100,
          url = "https://donate.shelter.org.uk/b?cid=152&amp;freeamount=1&amp;amount=";
  
      if (input.value === '' || parseInt(input.value, 10) &gt;= 0) {
          window.location.href = url + init * 100;
      } else {
          window.location.href = url + amount;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="shopping-item"&gt;
      &lt;p&gt;&lt;span&gt;£33&lt;/span&gt; could help a family find and keep a home&lt;/p&gt;
      &lt;input type="number" name="amount" placeholder="£33" class="shopping-1-input"&gt;
      &lt;button data-donation="33" class="donate-button shopping-1-button"&gt;donate now&lt;/button&gt;
  &lt;/div&gt;
      
  &lt;div class="shopping-item"&gt;
      &lt;p&gt;&lt;span&gt;£50&lt;/span&gt; could help a family find and keep a home&lt;/p&gt;
      &lt;input type="number" name="amount" placeholder="£50" class="shopping-2-input"&gt;
      &lt;button data-donation="50" class="donate-button shopping-2-button"&gt;donate now&lt;/button&gt;
  &lt;/div&gt;
      
  &lt;div class="shopping-item"&gt;
      &lt;p&gt;&lt;span&gt;£188&lt;/span&gt; could help a family find and keep a home&lt;/p&gt;
      &lt;input type="number" name="amount" placeholder="£188" class="shopping-3-input"&gt;
      &lt;button data-donation="188" class="donate-button shopping-3-button"&gt;donate now&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>