Событие клика 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. Измените порядок вашего кода, чтобы вы определили его до, которым вы его используете.

— 16.05.2022 23:24

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

— 17.05.2022 03:26

javascript

16.05.2022 23:21

Формы c голосовым вводом в React с помощью Speechly

Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...

В чем разница между Promise и Observable?

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.

Сравнение структур данных: Массивы и объекты в Javascript

Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...

Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели

Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...

Приложение для отслеживания бюджета на React js для начинающих

Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...

Стоит ли использовать React в 2022 году?

В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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);

16.05.2022 23:27

Ответ принят как подходящий

Ваш HTML-код недействителен
Див с классом 'контейнер' должен быть закрыт внутри тега раздела, ваш - вне его.
Чтобы предотвратить подобные ошибки, я рекомендую какой-нибудь форматировщик HTML, например Вот этот.
В вашем JavaScript вы используете функцию до того, как она определена. В данном случае это следующая функция. Определите его перед добавлением в EventListener следующим образом:

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

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

16.05.2022 23:37

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

TypeError: невозможно прочитать свойства неопределенного (чтение «addEventListener»)

Когда React вызывает функцию конструктора компонента и как выглядит поток выполнения?

Два маршрута используют параметры, но работает только один

Выберите только нажатую кнопку JQuery

Получить ключ ближайшего объекта из объекта, содержащего несколько объектов с числовыми ключами

Как сделать постоянное имя переменной в React

Как экспортировать и использовать функцию с помощью Express?

Попытка вернуть значение filter() из массива объектов на основе условий

Лучший способ сделать запрос по местоположению в firestore

Щелчок привязки данных даже передает текущий объект в параметр

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

Ответы 2

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

Похожие вопросы