Как отнимать единицу при клике на неверный вариант в квизе?

Question

[Станислав]

Как отнимать единицу при при клике на неверный вариант ответа? Сейчас при выборе правильного ответа добавляется единица, но в дальнейшем она остается, а хотелось бы, чтобы она обратно отнималась от общей суммы при клике на неверный ответ.

HTML

<section class="mytest">
  <ul class="mytest_1">
    <li class="mytest_question pq_01">
      <p>01. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem.</p>
      <ul>
        <li>
          <input type="radio" name="pq_01_answer1" value="0">
          <label for="">answer 01</label>
        </li>
        <li>
          <input type="radio" name="pq_01_answer1" value="0">
          <label for="">answer 02</label>
        </li>
        <li>
          <input type="radio" name="pq_01_answer1" value="1">
          <label for="">answer 03</label>
        </li>
      </ul>
    </li>
    <li class="mytest_question pq_01">
      <p>02. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem.</p>
      <ul>
        <li>
          <input type="radio" name="pq_01_answer2" value="0">
          <label for="mytest_q01_01">answer 01</label>
        </li>
        <li>
          <input type="radio" name="pq_01_answer2" value="0">
          <label for="mytest_q01_01">answer 02</label>
        </li>
        <li>
          <input type="radio" name="pq_01_answer2" value="1">
          <label for="mytest_q01_01">answer 03</label>
        </li>
      </ul>
    </li>
  </ul>
  <div class="mytest_result">
    <p>Результат: <span></span></p>
  </div>
</section>

JS

document.addEventListener('DOMContentLoaded', () => {

  let mytestResBox = document.querySelector('.mytest_result span');
  let mytestRes = 0;

  const mytestQuestions = document.querySelectorAll('.mytest_question');

  for (let i = 0; i < mytestQuestions.length; i++) {
    const mytestAnswers = mytestQuestions[i].querySelectorAll('input');

    for (let j = 0; j < mytestAnswers.length; j++) {
      let mytestAnswer = mytestAnswers[j];
      let flag = false;

      console.log(mytestAnswer);
      mytestAnswer.addEventListener('click', () => {
        if (mytestAnswer.value == 1 && flag == false) {
          mytestRes++;
          mytestResBox.innerHTML = mytestRes;
          flag = true;
        } else if (mytestAnswer.value == 0 && flag == true) {
          mytestRes--;
          mytestResBox.innerHTML = mytestRes;
          flag = false;
        }
      })
    }
  }

})

https://codepen.io/devlogic/pen/VwgvQKa

Answer 1

[0xD34F]

Не надо ничего отнимать, что-то изменилось - посчитали всё с нуля:

const questionEl = document.querySelector('ul');
const resultsEl = document.querySelector('p span');

questionEl.addEventListener('change', showResults);

function showResults() {
  resultsEl.innerText = Array.prototype.reduce.call(
    questionEl.querySelectorAll('input[type="radio"]:checked'),
    (acc, n) => acc + +n.value,
    0
  );
}

А вообще, правильно было бы показывать результат только после получения всех ответов; вопросы показывать по одному; не зашивать в разметку вопросы и варианты ответов. Как-то так.