AddEventListener null，OnClick Works(Onload不起作用，JS在单独的文档中)

Question

我可以在我的html文件中使用onclick来调用我的javascript文件中创建的函数，但是，尝试使用 addEventListener不起作用，我不确定为什么。console.log中的错误说addEventListner为null。

我试图通过单击事件更改网页的显示。

我知道addEventListener不会取消以前的事件，但即使是我的代码中的第一个事件也不会触发令人困惑的更改。

查找此内容后，我尝试了以下内容：

• 使用window.onload = function(){}并将以下代码放置在功能中。

  document.getElementById('begin_game').addEventListener('click', beginGame);

  document.getElementById('select_category').addEventListener('click', selectCategory);

• 使用此代码独立于window.onload函数，但addEventListener仍以null返回。

---

beginGame和selectCategory功能引用JS文件中的以下代码：

function Hide(x) {
  const hidden = document.getElementsByClassName(x);
  for (var i=0, length= hidden.length; i < length; i++) {
    if ( hidden[i].style.display != 'none') {
      hidden[i].style.display = 'none';
    }
  }
}
function Display(x) {
  const show = document.getElementsByClassName(x);
  for (var i = 0, length = show.length; i < length; i++) {
    if (show[i].style.display != 'flex') {
      show[i].style.display = 'flex';
    }
  }
}
//Below is how the functions are referenced
function beginGame() {
  document.getElementById('welcome').style.display = 'flex';
  Hide('start');
}
function selectCategory () {
  Hide('welcome-content');
  Display('category');
}
// Where I would place the event listeners I mentioned above
// document.getElementById('begin_game').addEventListener('click', beginGame);
// document.getElementById('select_category').addEventListener('click', selectCategory);
// When I used the window.onload function, I placed it at the bottom of the js page 

---

html文件的按钮

    <button type='submit' class='welcome-content' id='select_category'>
        Categories
    </button>
    </div>
    <h1 class= 'start'>
        Math Maniacs
    </h1>
    <button type='submit' class='start' id='begin_button'>
        START
    </button>

Answer 1

使用window.onload是正确的解决方案，我意识到我没有使用Onload函数包裹所有相关的JS代码。

在我做这件事之前

window.onload = function() {
     document.getElementById('begin_game').addEventListener('click', beginGame);
     document.getElementById('select_category').addEventListener('click', selectCategory);
 }

但是，我相信这是不起作用的，因为我没有将事件侦听器引用到窗口函数的函数。

我写下以下

window.onload = function() {
 function beginGame() {
    document.getElementById('welcome').style.display = 'flex';
    Hide('start');
}
 document.getElementById('begin_button').addEventListener('click', beginGame);
 function selectCategory() = {
    Hide('welcome-content');
    Display('category');
}
 document.getElementById('select_category').addEventListener('click', selectCategory);
}

该代码按预期工作