Javascript - 触发点击

Question

我需要快速修复构建问题 - 基本上，fe 构建显示了一个设计精美的 dropbox 上传按钮 - 我们的开发人员通过将 dropbox Logo 注入(inject)设计精美的 html 并留给我进行整理来实现 API -它基本上看起来像这样 -

编译后的代码是这样的-

<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>

作为快速修复 - 我的方法是通过快速的 CSS 隐藏 dropbox-dropin-btn 链接 -

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

并在单击样式链接时使用 javascript 触发对 dropbox 链接的单击 -(此元素中未使用 jquery) - 我承认我有一段时间没有使用 vaniall javascript - 但我已经编写了这段代码 -

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

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

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

WHich 不起作用 - 我得到的只是一个错误“typeerror:getelementbyid is null”

谁能告诉我哪里出了问题 - 或者为这种情况提供更好的完整解决方案？

谢谢

Answer 1

document.getElementsByClassName("dropbox-dropin-btn") 将返回一个元素数组。所以你需要取出第一个元素

由于id为db-link的div是后端过来的，一开始是不可用的。所以 javascript 将无法找到它。所以继续检查是否可见。

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)