为什么使用addEventListener或getElementsByClassName单击后显示不改变？

Question

我试图在按下按钮但显示内容不变的情况下弹出一个窗口。

<div class="options-box">
   <span><a href="#" id="btn" class="btn btn-eval">Evaluation</a></span>
   <span><a href="#" class="btn btn-stock">Our stock</a></span>
</div>
   <div class="bg-modal">
      <div class="modal-eval">
         <div class="close">+</div>
      </div>
      <div class="modal-stock">
      </div>
   </div>
</div>

document.getElementsByClassName(".btn").addEventListener("click", function() {
    document.querySelector(".bg-modal").style.display = "flex";
});

弹出窗口的div是否必须与创建按钮的div /跨度相同？