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.
– Rob M., Commented Aug 3, 2016 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
– tenhsor, Commented Aug 3, 2016 at 17:18

Syam Pillai · Accepted Answer · 2016-08-04 16:48:00Z

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 4, 2016 at 16:48

answered Aug 3, 2016 at 17:15

Syam Pillai

5,2202 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kyle Falconer Over a year ago

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.

Dancer Over a year ago

thanks @SyamPillai - the above gives the following error on click - (so at least its firing i guess) - SyntaxError: expected expression, got ')'

Community · Accepted Answer · 2017-05-23 12:22:36Z

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, 2017 at 12:22

CommunityBot

11 silver badge

answered Aug 3, 2016 at 17:22

sanfalero

3923 silver badges19 bronze badges

Collectives™ on Stack Overflow

Javascript - trigger click

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related