代码编辑器错误：无法读取null的属性'addEventListener'

Question

正如你可以检查下面的代码在这里运行正常但是当我在“Brackets”（代码编辑器）上运行它时，它给了我这个错误：

“无法读取属性'addEventListener'的null ...”

因此代码不起作用。

语法中是否有问题或是否与代码编辑器有关？

感谢。

var dropBtn = document.getElementById('dropdown-btn');

dropBtn.addEventListener('click',function() {
    var dropContent = document.querySelector('.dropdown-content');
    dropContent.classList.toggle('show');
});

#dropdown-btn {
  background-color:orange;
  display:inline-block;
  padding:5px;
  color:white;
  cursor:pointer;
}
.dropdown-content {
  display:none;
}
.show {
  display:block;
}

<div id="dropdown-btn">Button</div>

<div class="dropdown-content">
  <div>link1</div>
  <div>link1</div>
  <div>link1</div>
</div>