Javascript - trigger click

Question

I need a quick fix for a build issue - basically a fe build shows a nicely designed button for dropbox upload - our developer has implemented the API by injecting the dropbox logo into the nicely designed html and left fro me to sort out - it basically looks like this -

the compiled code looks like this -

<li>
        <a href="#" id="db-link" class="button">
            <i class="icon-dropbox" id="dropbox_upload">
        <a href="#" class=" dropbox-dropin-btn dropbox-dropin-default"><span class="dropin-btn-status"></span>Choose from Dropbox</a></i>
            <span>Select from Dropbox</span>
        </a>
    </li>

As a quick fix - my approach is to hide the dropbox-dropin-btn link via a quick bit of css -

.dropbox-dropin-btn{
  position:absolute;
  top:-10000px;
}

and use javascript to trigger a click on the dropbox link when teh styled link is clicked - (jquery isnt used in this project) - I'll admit that i havent used vaniall javascript in some time - but Ive written this code -

document.getElementById("db-link").addEventListener("click",   function(e) {

   var l =  document.getElementsByClassName("dropbox-dropin-btn");

   l.click();
   e.preventDefault();
});

WHich doesnt work - all i get is an error 'typeerror:getelementbyid is null'

Can anyone advise whts going wrong - or offer a better complete solution for this scenario?

Thanks

My guess is that the dropbox link is in an iframe, or your javascript is running before the link has been added to the DOM, hard to say without more info — Rob M., Aug 03 '16 at 17:15
the db-link element is being created dynamically too? it might be that you are trying to add the event listener when the element still doesn't exist in the DOM like @RobM. says. — tenhsor, Aug 03 '16 at 17:18

Syam Pillai · Accepted Answer · 2016-08-04T16:48:00.563

1

document.getElementsByClassName("dropbox-dropin-btn") will return an array of elements. so you need to take out the first element

Since the div with id db-link is coming from backend, it will not be viible at first. so javascript will fail to find that. So continuesly check that is visible or not.

var counter = 0;
setInterval(function(){
  if(document.getElementById("db-link") && counter < 1){
    document.getElementById("db-link").addEventListener("click",function(e) {

      var l =  document.getElementsByClassName("dropbox-dropin-btn");

      l[0].click();
      counter += 1;
      e.preventDefault();
    });
  }

}, 10)

edited Aug 04 '16 at 16:48

answered Aug 03 '16 at 17:15

Syam Pillai

4,967
2
26
42

While this is correct, and this would be a problem if his code got to that point, it doesn't match with the error that `document.getElementById("db-link")` is returning null. – Kyle Falconer Aug 03 '16 at 17:16
thanks @SyamPillai - the above gives the following error on click - (so at least its firing i guess) - SyntaxError: expected expression, got ')' – Dancer Aug 04 '16 at 15:56

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

Shot in the dark here, but maybe you need to put your javascript code at the bottom of your body so the document is loaded when you execute. You might want to see this question to do it properly on a pure javascript environment.

edited May 23 '17 at 12:22

Community

1
1

answered Aug 03 '16 at 17:22

sanfalero

372
2
18

Javascript - trigger click

2 Answers2