addEventListener null, onclick работает (onload не работает и js находится в отдельном документе) - PullRequest
Новая
       7

addEventListener null, onclick работает (onload не работает и js находится в отдельном документе)

0 голосов
/ 14 февраля 2019

Я могу использовать onClick в своем HTML-файле для вызова функций, созданных в моем файле JavaScript, однако попытка использовать addEventListener не работает, и я не уверен, почему.Ошибка в console.log говорит о том, что addEventListner равно нулю.

Я пытаюсь изменить отображение моей веб-страницы с помощью события щелчка.

Я понимаю, что addEventListener не отменяет предыдущее вызванное событие, но даже первое событие, вызванное в моем коде, не вызывает изменения, которое сбивает с толку.

После просмотра этого япопробовал следующее:

  • Используя window.onload = function(){} и поместив приведенный ниже код в функцию.

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

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

  • Использование этого кода независимо от функции window.onload, но addEventListener по-прежнему возвращается как ноль.

Функции 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>

1 Ответ

0 голосов
/ 15 февраля 2019

Использование window.onload было верным решением, я понял, что не включаю весь соответствующий код js с помощью функции onload.

Прежде чем я это сделал 

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

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

ОднакоЯ считаю, что это не сработало, потому что я не поместил функции, на которые ссылались обработчики событий, в функцию window.onload.

Как только я написал ниже 

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

}

Код работал как задумано

...