Как сделать так, чтобы при нажатии на кнопку выполнялся javascript код?

Question

const Answers1 = ["a", "b","b","a","a","a","b","a"];
const Answers2 = ["b","a","d","c","b","d","a","c"];
const Answers3 = ["с","b","a","d","c","b","c","b"];
let message="";
function checkAnswers() {
  const form = document.querySelector("form");
  const userAnswers = [form.q1.value, form.q2.value,form.q3.value,form.q4.value,form.q5.value,form.q6.value,form.q7.value,form.q8.value];
    if (userAnswers.toString() === Answers1.toString()) {
      message ='За цими критеріями можна порекомендувати такі книги:
      "The Alchemist's Daughter" - Кетрін Макмагон
"Leonardo's Swans" - Карен Есперт
"The Baroque Cycle" - Ніл Стівенсон (серія з трьох книг)';
    }
    else if (userAnswers.toString() === Answers2.toString()){
        message='За цими критеріями можна порекомендувати такі книги:
        "Blindsight" - Пітер Воттс
        "Neuromancer" - Вільям Ґібсон
        "Ender's Game" - Орсон Скотт Кард';
    }
    else if(userAnswers.toString() === Answers3.toString()){
        message='Детективи, що підходять під дані критерії, можуть бути наступні:
        "Дівчина з поїзда" Пола Хокінса - це психологічний трилер про жінку, яка стає свідком злочину з поїзда та починає розслідування, щоб допомогти поліції.
"Дівчина, яка полюбила Тома Гордона" Стівена Кінга - це роман-жах про молоду дівчину, яка заблукала в лісі та намагається вижити, зіткнувшись зі своїми найбільшими страхами.
"Нікого не залишай" Гарланда Арджун - це роман-головоломка про жінку, яка переживає трагедію та намагається розкрити її обставини, зробивши свій власний розслідування.';
    else{
        message='Світові бестселери якы рекомендує прочитати наша бібліотека:
        "Майстер і Маргарита" Михайла Булгакова - це культовий роман про сатану та його відвідування Москви, який є одним з найвизначніших творів російської літератури.

"1984" Джорджа Орвелла - це науково-фантастичний роман про диктатуру та контроль, який став бестселером, що не втрачає актуальності до сьогоднішнього дня.

"Великий Гетсбі" Френсіса Скотта Фіцджеральда - це роман про багатство, кохання та розпач, який став культовим у світовій літературі.

"Маленькі жінки" Луїзи Мей Олкотт - це класичний роман про життя сімейства Марч, який пропонує читачеві душевне тепло та моральні навички.

"Війна і мир" Льва Толстого - це один з найвідоміших романів в світі, що розповідає про життя російського суспільства на початку XIX століття.

"Дон Кіхот" Мігеля де Сервантеса - це класичний роман про пригоди рицаря Дон Кіхота та його вірного слуги Санчо Панси, який є одним з найвідоміших творів світової літератури.

"Лев Толстой" Германа Гессе - це біографічний роман про видатного російського письменника, який досліджує життя та думки Толстого.

"Таємниця довгої ночі" Агати Крісті - це детективний роман про злочин у замку та головолом';
    }
const resultElement = document.querySelector("form");
 resultElement.innerHTML = message;
}

<html>
  <head>
    <title>Тест-опитування</title>
  </head>
  <body>
  <h2>Вітаю! Для того, щоб допомогти вам вибрати книгу, я підготував невелике тест-опитування.<br> Будь ласка, відповідайте чесно і уважно на кожне запитання.</h2>
    <h1>Тест-опитування "Визначення ваших читацьких вподобань"</h1>
    <form>
      <p>1.Який жанр книг ви найбільше любите?</p>
      <input type="radio" name="q1" value="a">a) Романи<br>
      <input type="radio" name="q1" value="b">b) Фантастика<br>
      <input type="radio" name="q1" value="c">c) Детективи<br>
       <input type="radio" name="q1" value="d">d) Нон-фікшн<br>
      <p>2.Який тип головного героя ви найбільше цікавитесь?</p>
      <input type="radio" name="q2" value="a">a) Людина з сильним характером та волям<br>
      <input type="radio" name="q2" value="b">b) Смілива та відважна особистість<br>
      <input type="radio" name="q2" value="c">c) Інтелектуал з глибокими знаннямиt<br>
      <input type="radio" name="q2" value="d">d) Хитрий та мудрий лідер<br>
      <p>3.Яка тематика книг вас цікавить?</p>
      <input type="radio" name="q3" value="a">a) Історія та культура<br>
      <input type="radio" name="q3" value="b">b) Наука та технології<br>
      <input type="radio" name="q3" value="c">c) Бізнес та фінанси<br>
      <input type="radio" name="q3" value="d">d) Психологія та саморозвиток<br>
      <p>4.Яка країна вам найбільше цікава з точки зору культури та літератури?</p>
      <input type="radio" name="q4" value="a">a) США<br>
      <input type="radio" name="q4" value="b">b) Великобританія<br>
      <input type="radio" name="q4" value="c">c) Франція<br>
      <input type="radio" name="q4" value="d">d) Японія<br>
      <p>5.Якою мовою ви володієте?</p>
      <input type="radio" name="q5" value="a">a) Українська<br>
      <input type="radio" name="q5" value="b">b) Російська<br>
      <input type="radio" name="q5" value="c">c) Англійська<br>
      <input type="radio" name="q5" value="d">d) Інші<br>
      <p>6.Як ви зазвичай проводите свій вільний час?</p>
      <input type="radio" name="q6" value="a">a) Читаю книги<br>
      <input type="radio" name="q6" value="b">b) Дивлюся фільми<br>
      <input type="radio" name="q6" value="c">c) Граю в ігри<br>
      <input type="radio" name="q6" value="d">d) Займаюся спортом<br>
      <p>7.Яку книгу ви недавно прочитали та сподобалася?</p>
      <input type="radio" name="q7" value="a">a) "Хрещений батько" Маріо Пьюзо<br>
      <input type="radio" name="q7" value="b">b) "Ігри розуму" Стівен Хокін<br>
      <input type="radio" name="q7" value="c">c) "Шестеро в степі" Микола Гоголь<br>
      <input type="radio" name="q7" value="d">d) "Сила позитивного мислення" Норман Вінсент Піл<br>
       <p>8.Книги якої епохи вам найбільше цікаві?</p>
      <input type="radio" name="q8" value="a">a) Відродження<br>
      <input type="radio" name="q8" value="b">b) Романтизм<br>
      <input type="radio" name="q8" value="c">c) Середньовіччя<br>
      <input type="radio" name="q8" value="d">d) Барокко<br>
      <button type="submit">Подати відповіді</button>
    </form>
    <script type="text/javascript" src="quiz.js"> </script>
  </body>
</html>

Answer 1

Добавить кнопку,

Получить ее (https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector),

Написать событие для нее (https://learn.javascript.ru/introduction-browser-events),

Написать callback для этого события

А так же исправьте опечатки в коде)

Answer 2

Раз используете форму и button[type="submit"], то будем вешать событие submit (form.addEventListener('submit', () => {});) на форму, отменять действие отправки (event.preventDefautl();).
Ну и заменим строки на шаблонные.

const Answers1 = ["a", "b", "b", "a", "a", "a", "b", "a"];
const Answers2 = ["b", "a", "d", "c", "b", "d", "a", "c"];
const Answers3 = ["с", "b", "a", "d", "c", "b", "c", "b"];
const form = document.querySelector("form");
let message = "";

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const userAnswers = [form.q1.value, form.q2.value, form.q3.value, form.q4.value, form.q5.value, form.q6.value, form.q7.value, form.q8.value];
  
  if(userAnswers.toString() === Answers1.toString()) {
    message = `За цими критеріями можна порекомендувати такі книги:
    "The Alchemist's Daughter" - Кетрін Макмагон
      "Leonardo's Swans" - Карен Есперт "The Baroque Cycle" - Ніл Стівенсон(серія з трьох книг)`;
  } else
  if(userAnswers.toString() === Answers2.toString()) {
    message = `За цими критеріями можна порекомендувати такі книги:
    "Blindsight" - Пітер Воттс
      "Neuromancer" - Вільям Ґібсон "Ender's Game" - Орсон Скотт Кард`;
  } else
  if(userAnswers.toString() === Answers3.toString()) {
    message = `Детективи, що підходять під дані критерії, можуть бути наступні:
    "Дівчина з поїзда"
    Пола Хокінса - це психологічний трилер про жінку, яка стає свідком злочину з поїзда та починає розслідування, щоб допомогти поліції.
    "Дівчина, яка полюбила Тома Гордона"
    Стівена Кінга - це роман - жах про молоду дівчину, яка заблукала в лісі та намагається вижити, зіткнувшись зі своїми найбільшими страхами.
    "Нікого не залишай"
    Гарланда Арджун - це роман - головоломка про жінку, яка переживає трагедію та намагається розкрити її обставини, зробивши свій власний розслідування.`;
    } else {
      message = `Світові бестселери якы рекомендує прочитати наша бібліотека:
      "Майстер і Маргарита"
      Михайла Булгакова - це культовий роман про сатану та його відвідування Москви, який є одним з найвизначніших творів російської літератури.

      "1984"
      Джорджа Орвелла - це науково - фантастичний роман про диктатуру та контроль, який став бестселером, що не втрачає актуальності до сьогоднішнього дня.

      "Великий Гетсбі"
      Френсіса Скотта Фіцджеральда - це роман про багатство, кохання та розпач, який став культовим у світовій літературі.

      "Маленькі жінки"
      Луїзи Мей Олкотт - це класичний роман про життя сімейства Марч, який пропонує читачеві душевне тепло та моральні навички.

      "Війна і мир"
      Льва Толстого - це один з найвідоміших романів в світі, що розповідає про життя російського суспільства на початку XIX століття.

      "Дон Кіхот"
      Мігеля де Сервантеса - це класичний роман про пригоди рицаря Дон Кіхота та його вірного слуги Санчо Панси, який є одним з найвідоміших творів світової літератури.

      "Лев Толстой"
      Германа Гессе - це біографічний роман про видатного російського письменника, який досліджує життя та думки Толстого.

      "Таємниця довгої ночі"
      Агати Крісті - це детективний роман про злочин у замку та головолом`;
  }
  const resultElement = document.querySelector("form");
  resultElement.innerHTML = message;
  
  return false;
});

<h2>Вітаю! Для того, щоб допомогти вам вибрати книгу, я підготував невелике тест-опитування.<br> Будь ласка, відповідайте чесно і уважно на кожне запитання.</h2>
<h1>Тест-опитування "Визначення ваших читацьких вподобань"</h1>
<form>
  <p>1.Який жанр книг ви найбільше любите?</p>
  <input type="radio" name="q1" value="a">a) Романи<br>
  <input type="radio" name="q1" value="b">b) Фантастика<br>
  <input type="radio" name="q1" value="c">c) Детективи<br>
  <input type="radio" name="q1" value="d">d) Нон-фікшн<br>
  <p>2.Який тип головного героя ви найбільше цікавитесь?</p>
  <input type="radio" name="q2" value="a">a) Людина з сильним характером та волям<br>
  <input type="radio" name="q2" value="b">b) Смілива та відважна особистість<br>
  <input type="radio" name="q2" value="c">c) Інтелектуал з глибокими знаннямиt<br>
  <input type="radio" name="q2" value="d">d) Хитрий та мудрий лідер<br>
  <p>3.Яка тематика книг вас цікавить?</p>
  <input type="radio" name="q3" value="a">a) Історія та культура<br>
  <input type="radio" name="q3" value="b">b) Наука та технології<br>
  <input type="radio" name="q3" value="c">c) Бізнес та фінанси<br>
  <input type="radio" name="q3" value="d">d) Психологія та саморозвиток<br>
  <p>4.Яка країна вам найбільше цікава з точки зору культури та літератури?</p>
  <input type="radio" name="q4" value="a">a) США<br>
  <input type="radio" name="q4" value="b">b) Великобританія<br>
  <input type="radio" name="q4" value="c">c) Франція<br>
  <input type="radio" name="q4" value="d">d) Японія<br>
  <p>5.Якою мовою ви володієте?</p>
  <input type="radio" name="q5" value="a">a) Українська<br>
  <input type="radio" name="q5" value="b">b) Російська<br>
  <input type="radio" name="q5" value="c">c) Англійська<br>
  <input type="radio" name="q5" value="d">d) Інші<br>
  <p>6.Як ви зазвичай проводите свій вільний час?</p>
  <input type="radio" name="q6" value="a">a) Читаю книги<br>
  <input type="radio" name="q6" value="b">b) Дивлюся фільми<br>
  <input type="radio" name="q6" value="c">c) Граю в ігри<br>
  <input type="radio" name="q6" value="d">d) Займаюся спортом<br>
  <p>7.Яку книгу ви недавно прочитали та сподобалася?</p>
  <input type="radio" name="q7" value="a">a) "Хрещений батько" Маріо Пьюзо<br>
  <input type="radio" name="q7" value="b">b) "Ігри розуму" Стівен Хокін<br>
  <input type="radio" name="q7" value="c">c) "Шестеро в степі" Микола Гоголь<br>
  <input type="radio" name="q7" value="d">d) "Сила позитивного мислення" Норман Вінсент Піл<br>
  <p>8.Книги якої епохи вам найбільше цікаві?</p>
  <input type="radio" name="q8" value="a">a) Відродження<br>
  <input type="radio" name="q8" value="b">b) Романтизм<br>
  <input type="radio" name="q8" value="c">c) Середньовіччя<br>
  <input type="radio" name="q8" value="d">d) Барокко<br>
  <button type="submit">Подати відповіді</button>
</form>

БЛОГ НА HUSL

Как сделать так, чтобы при нажатии на кнопку выполнялся javascript код?

Ответы (2 шт):