Question

我可以在HTML文件中使用onClick来调用在JavaScript文件中创建的函数，但是，尝试使用addEventListener无效，我不确定为什么。 console.log中的错误表明addEventListner为空。

我正在尝试通过click事件更改网页的显示。

我知道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

使用Fragment是正确的解决方案，我意识到我并没有使用onload函数来封装所有相关的js代码。

在我这样做之前

ScrollView

但是，我认为那是行不通的，因为我没有将事件侦听器引用的函数放置到window.onload函数中。

一旦我写了以下内容

adjustSize

代码按预期工作

addEventListener为null，onclick可以正常工作（onload无效，并且js位于单独的文档中）

1 个答案: