title: getElementsByClassName is not working. I want class instead of ID
body: <p>Yesterday I was created <a href="https://stackoverflow.com/questions/73754444/automatic-autoclick-needed-for-my-datatable-jquery-javascript">this Post</a>. But I did'nt get any response from it. So I am creating this post. Now I have a jQuery autoclick script which is working with my datatables. But it is not working with <strong><code>document.getElementsByClassName</code></strong>. It is only working with <code>document.getElementById</code>. But I need to add it multiple section of page. Please convert my autoclick codes for class name.</p>
  <p>can you make this script something like :</p>
  <pre><code>$(document).ready(function () {
      $('.autoclick').autoclick({
  </code></pre>
  <p><strong>Autoclick Script</strong></p>
  <pre><code>var autoclickBtn = document.getElementsByClassName(&quot;autoclick&quot;);
  autoclickBtn.addEventListener(&quot;click&quot;, () =&gt; {
    console.log(&quot;Button clicked&quot;);
  });
  var interval = window.setInterval(() =&gt; {
    autoclickBtn.click();
  }, 2000);
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"&gt;
  &lt;script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  &lt;table id="example" class="display" style="width:100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Age&lt;/th&gt;
                  &lt;th class="autoclick"&gt;Points&lt;/th&gt;
                  &lt;th&gt;Total&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" value="99"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="55"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="45"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="75"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" value="89"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="72"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="79"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="39"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" value="97"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="12"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="25"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="19"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" value="22"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="32"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="19"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="43"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" value="49"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="18"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="63"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="74"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" value="37"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="49"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="58"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="37"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" value="28"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="19"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="67"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" value="47"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Age&lt;/th&gt;
                  &lt;th&gt;Position&lt;/th&gt;
                  &lt;th&gt;Office&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
      &lt;/table&gt;
     
  &lt;script type=""&gt;
  $.fn.dataTable.ext.order['dom-text-numeric'] = function (settings, col) {
      return this.api()
          .column(col, { order: 'index' })
          .nodes()
          .map(function (td, i) {
              return $('input', td).val() * 1;
          });
  };
  
  $(document).ready(function () {
      $('#example').DataTable({
      order: [[2, 'asc']],
          columns: [
              { orderDataType: 'dom-text-numeric' },
              { orderDataType: 'dom-text-numeric' },
              { orderDataType: 'dom-text-numeric' },
              { orderDataType: 'dom-text-numeric' },
          ],
      });
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var autoclickBtn = document.getElementsByClassName("autoclick");
  
  autoclickBtn.addEventListener("click", () =&gt; {
    console.log("Button clicked");
  });
  
  var interval = window.setInterval(() =&gt; {
    autoclickBtn.click();
  }, 2000);
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>