Как в JS создать событие по нажатию на radio button

var next = document.getElementById('next'), 
  prev = document.getElementById('back'), 
  progressBar = document.getElementById('progressBar'), 
  progress = document.querySelector('.progress-bar span'), 
  wizardSubmit = document.getElementById('wizardSubmit'), 
  wizardPercent = document.getElementById('wizardPercent'), 
  resultContainer = document.getElementById('result'), 
  result = 0, 
  ajaxLoader = document.querySelector('.ajax-loader'), 
  resultValue = 0, 
  progressWidth = 0, 
  counter = 0, 
  progressStepLength = 0, 
  wizardSection = document.getElementsByClassName('wizard-section'); 
 
progressStepLength = Math.round(100 / (wizardSection.length - 1)); //set length of one step for progressbar and percent counter 
 
progress.style.width = progressWidth; //style for progress bar (width = 0) 
 
next.innerHTML = 'Начать тест!'; 
 
//click on next button 
next.addEventListener('click', function(event) { 
  event.preventDefault(); 
  var step = wizardSection[counter].getAttribute('data-step'); //get data-step attribute from current section 
 
  if (step == counter) { 
    wizardSection[counter].style.display = 'none'; //hide current section 
    wizardSection[counter + 1].style.display = 'block'; //show next section 
  } 
 
  counter++; 
 
  console.log(counter); 
  progressWidth += progressStepLength; 
 
  if (counter <= 1) { 
    progressWidth = 0; 
  } 
 
  next.innerHTML = 'Далее'; 
 
  prev.style.display = 'block'; //show next  button 
 
  progressBar.style.display = 'flex'; 
 
  progress.style.width = `${progressWidth}%`; //add width to progress bar 
  wizardPercent.innerHTML = `${progressWidth}%`; //add percent step for percent counter 
 
  if (counter >= wizardSection.length - 1) { 
    next.style.display = 'none'; // hide next and prev buttons if it is the last step 
    prev.style.display = 'none'; 
 
  } 
 
  if (step == (wizardSection.length - 2)) { 
 
    // Calculate common values all checkboxes and calculate the result 
    var inputChecked = document.querySelectorAll('input:checked'), // get all checked radio buttons (it is not an array) 
      inputCheckedArray = []; // set empty array 
 
    for (i = 0; i < inputChecked.length; i++) { 
      inputCheckedArray[i] = parseInt(inputChecked[i].value); // load values to array 
    } 
 
    resultValue = inputCheckedArray.reduce(function(previousValue, currentValue) { 
      return previousValue + currentValue; // get sum of all elements from array 
    }) 
 
    //result = Math.floor(resultValue / (wizardSection.length - 2)) + ' '; // set result value to markup 
 
    result = resultValue / (wizardSection.length - 2) 
 
    result = result.toFixed(1) 
 
    resultContainer.value = result; 
 
    progress.style.width = '100%'; 
    wizardPercent.innerHTML = '100%'; 
 
  } 
  $('html, body').animate({ 
    scrollTop: 0 
  }, 'fast'); 
 
}); 
 
 
//click on previous button 
back.addEventListener('click', function(event) { 
  event.preventDefault(); 
  var step = wizardSection[counter].getAttribute('data-step'); 
 
  next.style.display = 'block'; // show next button even if last step was the lasts 
 
  if (step == counter) { 
    wizardSection[counter].style.display = 'none'; 
    wizardSection[counter - 1].style.display = 'block'; 
  } 
 
  counter--; 
  progressWidth -= progressStepLength; 
 
  //set zero progress in first step of quiz, because in fact first step is start page 
  if (counter <= 1) { 
    progressWidth = 0; 
  } 
 
  prev.style.display = 'block'; 
 
  progress.style.width = `${progressWidth}%`; 
  wizardPercent.innerHTML = `${progressWidth}%`; 
 
  if (counter == 0) { 
    prev.style.display = 'none'; 
    progressBar.style.display = 'none'; 
    next.innerHTML = 'Start!'; 
  } else { 
    prev.style.display = 'block'; 
  } 
 
}); 
 
 
//Submit form (use jQuery) 
 
$(function() { 
  var form = $('#wizardForm'), 
    formMessages = $('#formMessages'); 
 
  $(form).on('change', function(ev) { 
    if (ev.target.tagName == 'INPUT' && ev.target.getAttribute('type') == 'radio') { 
      next.dispatchEvent(new Event('click', { 
        bubbles: true 
      })); 
    } 
  }); 
 
  $(form).submit(function(e) { 
    e.preventDefault(); 
 
    formData = form.serialize(); 
 
    $.ajax({ 
        type: 'POST', 
        url: $(form).attr('action'), 
        data: formData, 
        success: function(data) { 
          console.log('ajax ok '); 
        }, 
        error: function(data) { 
          console.log('ajax error '); 
        } 
      }) 
      .done(function(response) { 
        $(formMessages).toggleClass('cuccess'); 
        $(formMessages).css('display', 'block'); 
        $(formMessages).text(response); 
        $('#wizardForm input').val(''); 
        console.log(formData); 
        console.log(result); 
        document.location.href = 'http://mkozlov.com/thanks.html'; 
      }) 
      .fail(function(data) { 
        $(formMessages).toggleClass('error'); 
        // $(formMessages).addClass('error'); 
        $(formMessages).css('display', 'block'); 
        $(formMessages).text('Упс! Сообщение не удалось отправить'); 
        console.log(formData); 
      }); 
  }); 
 
  $(document).ajaxStart(function() { 
    $(formMessages).css('display', 'block'); 
    $('#ajaxLoader').css('display', 'block'); 
    console.log('ajax-start'); 
  }) 
 
});

/* ==========Base styles: opinionated defaults=========== */ 
 
html { 
  font-family: sans-serif; 
  font-size: 1em; 
  line-height: 1.4; 
} 
 
body { 
  position: relative; 
  /* overflow-x: hidden; */ 
} 
 
input { 
  padding: 1rem; 
  border-radius: 3px; 
  border-style: outset; 
  border: 1px solid #d7d7d7; 
} 
 
.text-center { 
  text-align: center; 
} 
 
.form-group { 
  margin-bottom: 20px; 
} 
 
.form-block { 
  text-align: center; 
  width: 45%; 
  margin: auto; 
  background: #fff; 
  padding: 20px; 
  -webkit-box-shadow: 0px 8px 20px 8px rgba(0, 0, 0, .07); 
  box-shadow: 0px 8px 20px 8px rgba(0, 0, 0, .07); 
} 
 
.form-block-info { 
  text-align: center; 
} 
 
.result-text { 
  text-align: center; 
  width: 90%; 
  margin: auto; 
  background: #fff; 
  padding: 20px; 
  -webkit-box-shadow: 0px 8px 20px 8px rgba(0, 0, 0, .07); 
  box-shadow: 0px 8px 20px 8px rgba(0, 0, 0, .07); 
} 
 
 
/*============= Variables ================== */ 
 
 :root { 
  --accent: #f10315; 
  --accent2: #b1020f; 
  --text: #333; 
} 
 
 
/*============= Author's custom styles================== */ 
 
.start-section { 
  text-align: center; 
} 
 
.wizard-wrapper { 
  position: relative; 
  max-width: 800px; 
  margin: 0 auto; 
  color: var(--text); 
  box-shadow: 1px 6px 22px rgba(49, 49, 49, .2); 
  border-radius: 3px; 
  padding: 20px; 
} 
 
.wizard ul { 
  list-style: none 
} 
 
 
/*Wizard-form*/ 
 
.wizard-section h3 { 
  font-size: 20px; 
  font-weight: 600; 
  text-transform: none; 
  text-align: center; 
} 
 
.wizard input[type=radio] { 
  position: absolute; 
  opacity: 0; 
  width: 0; 
  height: 0; 
} 
 
.wizard input { 
  width: 90%; 
  font-size: 0.9em; 
  border-radius: 0px 0px 0px 0px; 
  border-width: 0px 0px 1px 0px; 
  border-color: rgba(0, 0, 0, 0.2); 
} 
 
.wizard-content-block { 
  display: flex; 
  margin: 0 auto 40px; 
  /*display: -webkit-box; 
  display: -ms-flexbox;*/ 
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap; 
  -webkit-box-pack: justify; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
  -ms-flex-line-pack: distribute; 
  align-content: space-around; 
} 
 
.answer-variants { 
  -webkit-box-flex: 0; 
  -ms-flex: 45%; 
  flex: 45%; 
  margin-bottom: 1rem; 
  border-radius: 5px; 
  border: 1px solid rgba(217, 216, 230, .55); 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
  box-shadow: 1.7px 5.8px 21px 0 rgba(0, 0, 0, .07); 
  border: 1px solid rgba(217, 216, 230, .55); 
  padding: .8rem 1rem; 
} 
 
.wizard-content-block label { 
  position: relative; 
  display: flex; 
  align-items: center; 
  margin-bottom: .5rem; 
} 
 
.wizard-content-block label span { 
  display: inline-block; 
  position: relative; 
  width: 15px; 
  height: 15px; 
  min-width: 15px; 
  margin-right: 1rem; 
  border: 2px solid #d7d7d7; 
  border-radius: 50%; 
  transition: all .3s; 
} 
 
.wizard-content-block label span:before { 
  content: ''; 
  position: absolute; 
  display: block; 
  background-color: transparent; 
  height: 60%; 
  width: 60%; 
  top: 50%; 
  left: 50%; 
  transform: translateX(-55%) translateY(-48%); 
  border-radius: 50%; 
  transition: .3s ease-in-out; 
} 
 
.wizard-content-block label span:hover { 
  box-shadow: 1px 3px 12px rgba(49, 49, 49, .4); 
} 
 
.wizard-content-block label input[type=radio]:checked+span { 
  border: 2px solid #f10315; 
} 
 
.wizard-content-block label input[type=radio]:checked+span:before { 
  background-color: #f10315; 
} 
 
.ajax-loader { 
  display: none; 
  margin: 5px auto; 
} 
 
.wizard .wpcf7-not-valid-tip { 
  margin: 5px auto; 
} 
 
.input-result { 
  border: none; 
  padding: 0; 
  font-size: 22px !important; 
  font-weight: bold; 
} 
 
 
/* PROGRESS LINE */ 
 
.progress-bar { 
  display: none; 
  background-color: #d7d7d7; 
  height: 15px; 
  padding: 2px; 
  width: 100%; 
  margin: 20px auto 40px; 
  border-radius: 3px; 
} 
 
.progress-bar>span { 
  display: inline-block; 
  height: 100%; 
  position: relative; 
  width: 0; 
  border-radius: 3px; 
  transition: width .3s ease-in-out; 
  background-color: var(--accent); 
  background: linear-gradient(to right, var(--accent), var(--accent2)); 
} 
 
.wizard-percent { 
  position: absolute; 
  /*right: -20px;*/ 
  top: 20px; 
  font-size: 20px; 
  color: var(--accent); 
  width: 100px; 
} 
 
 
/* BUTTONS */ 
 
.wizard button.button-back { 
  display: none; 
  color: #363636; 
  background: #fff; 
  box-shadow: 0 3px 13px 0 rgba(0, 0, 0, .13); 
} 
 
.wizard .actions { 
  width: 100%; 
  display: flex; 
  justify-content: space-around; 
} 
 
.wizard .button { 
  display: inline-block; 
  border-radius: 30px; 
  letter-spacing: 0.06em; 
  font-size: 16px; 
  font-weight: 600; 
  margin-bottom: 20px; 
  background-color: #f10315; 
  color: #fff; 
  border: none; 
  text-transform: uppercase; 
  transition: all.3s; 
  padding: 12px 30px; 
  ; 
  line-height: 1.5; 
  box-shadow: 0 3px 13px 0 rgba(0, 0, 0, .13); 
} 
 
.wizard .button:hover { 
  cursor: pointer; 
} 
 
.wizard .button:hover { 
  background-color: #f10315; 
  box-shadow: 0px 5px 13px rgba(49, 49, 49, .3); 
  text-decoration: none; 
} 
 
.final-section .submit-btn { 
  width: auto; 
} 
 
.form-messages { 
  display: none; 
  color: var(--accent2); 
  padding: 1rem; 
  text-align: center; 
  border: 2px solid var(--accent); 
} 
 
.cuccess {} 
 
.error { 
  border: 2px solid red; 
} 
 
 
/* ============= Helper classes=============== */ 
 
.hidden { 
  display: none !important; 
} 
 
 
/* 
* Hide only visually, but have it available for screen readers: 
*/ 
 
.visuallyhidden { 
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px; 
  white-space: nowrap; 
  /* 1 */ 
} 
 
 
/* 
* Hide visually and from screen readers, but maintain layout 
*/ 
 
.invisible { 
  visibility: hidden; 
} 
 
 
/* ====================MEDIA==================== */ 
 
@media (max-width: 992px) {} 
 
@media (max-width: 768px) { 
  .wizard-content-block { 
    max-width: 100%; 
  } 
  .wizard .button { 
    width: 48%; 
  } 
  .final-section .submit-btn { 
    width: 100%; 
  } 
  input { 
    width: 100%; 
  } 
  .wizard-wrapper { 
    box-shadow: none; 
    padding: 10px; 
  } 
  .form-block { 
    width: 90%; 
    margin: auto; 
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<body> 
  <div class="wizard-wrapper"> 
    <form id="wizardForm" action="send.php"> 
      <div class="wizard"> 
        <div class="progress-bar" id="progressBar"> 
          <span style="width: 0px;"> 
            <span class="wizard-percent" id="wizardPercent">0%</span> 
          </span> 
        </div> 
 
        <!-- Start section --> 
        <section class="wizard-section start-section" data-step="0" style="display: block;"> 
          <h2>Тест: Рейтинг Невесты</h2> 
          <p>Если честно и объективно оцените себя по 24 параметрам, то сможете оценить свои реальные шансы выйти за муж за достойного, обеспеченного мужчину</p> 
          <div class="wizard-content-block"> 
 
          </div> 
        </section> 
 
        <!-- Quiz sections --> 
        <section class="wizard-section" data-step="1" style="display: none;"> 
          <h3>Сколько вам лет?</h3> 
          <div class="wizard-content-block"> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="age" value="10"> 
                <span></span> 
                18 - 20 лет 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="age" value="9"> 
                <span></span> 
                21 - 22 года 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="age" value="8"> 
                <span></span> 
                23 - 24 года 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="age" value="7"> 
                <span></span> 
                25 - 26 лет 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="age" value="6"> 
                <span></span> 
                27 - 29 лет 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="age" value="5"> 
                <span></span> 
                30 - 32 года 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="age" value="4"> 
                <span></span> 
                33 - 35 лет 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="age" value="3"> 
                <span></span> 
                36 - 39 лет 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="age" value="2"> 
                <span></span> 
                40 - 45 лет 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="age" value="1"> 
                <span></span> 
                старше 45 лет 
              </label> 
            </div> 
          </div> 
        </section> 
 
        <section class="wizard-section" data-step="2" style="display: none;"> 
          <h3>Оцените свою внешность</h3> 
          <div class="wizard-content-block"> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="face" value="10"> 
                <span></span> 
                Мисс Вселенная 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="face" value="9"> 
                <span></span> 
                Топ модель Западного уровня 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="face" value="8"> 
                <span></span> 
                Топ модель России 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="face" value="7"> 
                <span></span> 
                Красивая 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="face" value="6"> 
                <span></span> 
                Симпатичная 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="face" value="5"> 
                <span></span> 
                Миловидная 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="face" value="4"> 
                <span></span> 
                Неприметная 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="face" value="3"> 
                <span></span> 
                Легкие недостатки 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="face" value="2"> 
                <span></span> 
                Заметные недостатки 
              </label> 
            </div> 
            <div class="answer-variants"> 
              <label> 
                <input type="radio" name="face" value="1"> 
                <span></span> 
                Зато умная 
              </label> 
            </div> 
          </div> 
        </section> 
        <!-- Result sections --> 
        <section class="wizard-section final-section" data-step="25" style="display: none;"> 
          <div class="wizard-content-block"> 
            <h3 class="text-center result-text">Ваши рейтинг невесты: 
              <input type="text" class="input-result text-center" id="result" name="result" value=""></h3> 
            <h3 class="text-center form-info">Хотите узнать, что эта цифра значит и как повысить свои шансы выйти удачно замуж? </h3> 
            <div class="form-block"> 
              <div class="form-group"> 
                <p class="text-center form-block-info">Регистрируйтесь на бесплатный вебинар, на котором вы узнаете все ответы.</p> 
              </div> 
              <div class="form-group"> 
                <input type="name" name="name" value="" placeholder="Ваше имя" id="name"> 
              </div> 
              <div class="form-group"> 
                <input type="tel" name="phone" value="" placeholder="Номер телефона" id="phone"> 
              </div> 
              <div class="form-group"> 
                <input type="email" name="email" value="" placeholder="Ваш e-mail" id="email" required> 
              </div> 
              <div class="form-group"> 
                <button type="submit" class="button submit-btn" id="wizardSubmit">Принять участие</button> 
              </div> 
              <div class="form-messages" id="formMessages"> 
                <div class="ajax-loader" id="ajaxLoader"> 
                  <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"> 
                    <rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF" /> 
                    <g> 
                      <circle cx="16" cy="64" r="16" fill="#fdba00" fill-opacity="1" /> 
                      <circle cx="16" cy="64" r="14.344" fill="#fdba00" fill-opacity="1" transform="rotate(45 64 64)" /> 
                      <circle cx="16" cy="64" r="12.531" fill="#fdba00" fill-opacity="1" transform="rotate(90 64 64)" /> 
                      <circle cx="16" cy="64" r="10.75" fill="#fdba00" fill-opacity="1" transform="rotate(135 64 64)" /> 
                      <circle cx="16" cy="64" r="10.063" fill="#fdba00" fill-opacity="1" transform="rotate(180 64 64)" /> 
                      <circle cx="16" cy="64" r="8.063" fill="#fdba00" fill-opacity="1" transform="rotate(225 64 64)" /> 
                      <circle cx="16" cy="64" r="6.438" fill="#fdba00" fill-opacity="1" transform="rotate(270 64 64)" /> 
                      <circle cx="16" cy="64" r="5.375" fill="#fdba00" fill-opacity="1" transform="rotate(315 64 64)" /> 
                      <animateTransform attributeName="transform" type="rotate" values="0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64" 
                        calcMode="discrete" dur="720ms" repeatCount="indefinite"></animateTransform> 
                    </g> 
                  </svg> 
                </div> 
              </div> 
            </div> 
          </div> 
        </section> 
 
        <!-- Step buttons --> 
        <div class="actions"> 
          <button class="button button-back" href="#progressBar" id="back">Назад</button> 
          <button class="button button-next" href="#progressBar" id="next">Далее</button> 
        </div> 
 
      </div> 
      <div class="response display-none"></div> 
    </form> 
  </div> 
 
</body>