Auto Click Button Javascript-CodePudding

I cannot call & click a button using their ClassName or ID. I get an error

.click is not a function

What is wrong in my code?

I want to autoclick the download button using their ClassName or ID and tried the two code below but it is not working.

window.addEventListener("load", function() {
  document.getElementById("toolbar_download_button").click();
});

<div id="toolbarNew" >
  <div id="toolbarContainer">
    <div id="toolbarViewer">
      <div id="toolbarViewerRight">
        <button id="toolbar_download_button" type="button"  style="float: left;" data-cha-target-name="download_doc_btn" data-cha-location="doc_viewer" data-cha-action-type="download" data-cha-action-target-id="50272799" data-testid="toolbar-download-btn">
             <div  data-testid="toolbar-download-btn-tooltip">Download</div></button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

It looks like you're mixing up the jQuery click handler with Vanilla JavaScript. That's why it's throwing the error you mentioned.

If you want to add a click event handler you could do in several ways:

With the native click event handler
With the native onclick global event handler
With jQuery's click
With jQuery's on

window.addEventListener("load", function() {
  // Vanilla JavaScript 'click'
  document.getElementById("toolbar_download_button").addEventListener('click', function() {
    console.log("Fire one");
  });

  // Vanilla JavaScript 'onclick'
  document.getElementById("toolbar_download_button").onclick = function() {
    console.log("Fire two");
  };

  // With jQuery's 'click'
  $("#toolbar_download_button").click(function() {
    console.log("Fire three");
  });
  
  // With jQuery's 'on'
  $("#toolbar_download_button").on('click', function() {
    console.log("Fire four");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toolbarNew" >
  <div id="toolbarContainer">
    <div id="toolbarViewer">
      <div id="toolbarViewerRight">
        <button id="toolbar_download_button" type="button"  style="float: left;" data-cha-target-name="download_doc_btn" data-cha-location="doc_viewer" data-cha-action-type="download" data-cha-action-target-id="50272799" data-testid="toolbar-download-btn">
             <div  data-testid="toolbar-download-btn-tooltip">Download</div></button>
      </div>
    </div>
  </div>
</div>

Tip: If decide to add jQuery to your project, then you might as well take advantage of it and use it to handle everything (capturing DOM elements, adding event handlers, etc.,). Otherwise use the native JavaScript handlers instead.

CodePudding user response：

you should write the correct syntax

 document.getElementById("toolbarButton").onclick();

CodePudding user response：

Need correction in element id.

window.addEventListener("load", function() {
  document.getElementById("toolbar_download_button").click();
});

<div id="toolbarNew" >
  <div id="toolbarContainer">
    <div id="toolbarViewer">
      <div id="toolbarViewerRight">
        <button id="toolbar_download_button" type="button"  style="float: left;" data-cha-target-name="download_doc_btn" data-cha-location="doc_viewer" data-cha-action-type="download" data-cha-action-target-id="50272799" data-testid="toolbar-download-btn">
             <div  data-testid="toolbar-download-btn-tooltip">Download</div></button>
      </div>
    </div>
  </div>
</div>