Событие клика AddEventListener не работает

поэтому я пытаюсь сделать игру для проекта, который показывает кнопку «Далее». Мой код, похоже, не работает, когда я добавляю прослушиватель событий к переменной. Консоль сообщает мне, что даже переменная имеет значение null, а в инспекторе тег события не отображается. Кажется, я не знаю, в чем проблема.

var section = document.querySelector('seccion');
var container = document.querySelector('container');
var text = document.querySelector('text');
var optionButtons = document.querySelector('option-buttons')
const button = document.getElementById('next');

var siguiente = button.addEventListener('click', next, true);

var next = function() {
    var aparece = alert('funciona')
};
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text Adventure</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
<link href="style.css" rel="stylesheet">

</head>
<body>
    
    <section id="seccion">    
    <div class="container">
        <div id="text">text</div>
        <div id="option-buttons" class="btn-grid">
        <button id='next' class="btn">Siguiente</button>            
        </div>
    </section>    
    
    </div>
    <script type='text/javascript' src="app.js"></script>
    
</body>
</html>
next — это undefined, когда вы звоните addEventListener. Измените порядок вашего кода, чтобы вы определили его до, которым вы его используете.
Quentin 16.05.2022 23:24

Благодарю вас! это сработало. Я видел, как некоторые учителя вызывали эту функцию после прослушивателя событий, и у них это работало. Но это мне очень помогло. Чем ты снова

Carmavals 17.05.2022 03:26
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
2
26
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам нужно изменить переменную на функцию, чтобы использовать силу подъема javascript или изменить порядок кода:

var section = document.querySelector('seccion');
var container = document.querySelector('container');
var text = document.querySelector('text');
var optionButtons = document.querySelector('option-buttons')
const button = document.getElementById('next');

var siguiente = button.addEventListener('click', next, true);

function next() {
    var aparece = alert('funciona')
};

или

var section = document.querySelector('seccion');
var container = document.querySelector('container');
var text = document.querySelector('text');
var optionButtons = document.querySelector('option-buttons')
const button = document.getElementById('next');

var next = function() {
    var aparece = alert('funciona')
};

var siguiente = button.addEventListener('click', next, true);
Ответ принят как подходящий
  1. Ваш HTML-код недействителен
    Див с классом 'контейнер' должен быть закрыт внутри тега раздела, ваш - вне его.
    Чтобы предотвратить подобные ошибки, я рекомендую какой-нибудь форматировщик HTML, например Вот этот.
  2. В вашем JavaScript вы используете функцию до того, как она определена. В данном случае это следующая функция. Определите его перед добавлением в EventListener следующим образом:
function next() {
    var aparece = alert('funciona')
}

var siguiente = button.addEventListener('click', next, true);

Другие вопросы по теме