Приветствую всех! Необходима помощь.
Начал создавать динамический опросник (Опыта в JS не особо много).
Столкнулся с тем, что не могу получить данные с нажатых кнопок. Необходимо, чтобы пользователь нажимал на кнопку, браузер это считывал и записывал в объект / массив (заодно и подскажите, что в данном случае будет лучше).
Также, интересует, как добавить класс кнопке при нажатии,
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<div id="Question1" class="show">
Выберите язык перевода
<button type="button" data-next="Question2">Английский</button>
<button type="button" data-next="Question2">Немецкий</button>
<button type="button" data-next="Question2">Французкий</button>
<button type="button" data-next="Question2">Испанский</button>
<button type="button" data-next="Question2">Итальянский</button>
<button type="button" data-next="Question2">Русский</button>
<button type="button" data-next="Question2">Другой</button>
</div>
<div id="Question2">
Нужна печать на переводе?
<button type="button" data-next="Question4">Да</button>
<button type="button" data-next="Question3">Нет</button>
</div>
<div id="Question3">
<p>Направим перевод без печатей и подписей в формате docx на ваш имейл</p>
</div>
<div id="Question4">
Печать бюро или нотариуса?
<button type="button" data-next="Question5">Бюро</button>
<button type="button" data-next="Question5">Нотариуса</button>
</div>
<div id="Question5">
В каком городе вам будет удобно получить перевод в бумажном виде?
<button type="button" data-next="Question6">Москва</button>
<button type="button" data-next="Question6">СПБ</button>
<button type="button" data-next="Question8">Мне достаточно электронной версии</button>
<button type="button" data-next="Question9">Нужна доставка в другой город / на дом</button>
</div>
<div id="Question6">
Перевод подшиваем к
<button type="button" data-next="Question9">Самому документу</button>
<button type="button" data-next="Question8">Простой ксерокопии</button>
<button type="button" data-next="Question9">Нотариальной копии</button>
</div>
<div id="Question7">
К самому документу
</div>
<div id="Question8">
<button type="button" data-next="Question9">Ч/б ксерокопии</button>
<button type="button" data-next="Question9">Цветной ксеркопии</button>
</div>
<div id="Question9">
Как написать ваше имя?
<button type="button" data-next="Question9">По загран паспорту</button>
<button type="button" data-next="Question9">По - русски</button>
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
div {
display: none;
}
.show {
display: block;
}
.fwb {
font-weight: bold;
}
let buttons = document.getElementsByTagName('button'),
questions = document.getElementsByTagName('div');
answers = [];
for (let i = 0; i < buttons.length; i++) {
let button = buttons[i];
button.addEventListener('click', function() {
let target = this.getAttribute('data-next');
for (let j = 0; j < questions.length; j++){
let question = questions[j];
if (question.id == target) {
question.classList.add('show');
}
}
});
}
