Unable to make two functions work toghether

The scope of the code is to create a fun quiz with two choices. User can select either ‘a’ or ‘b’. When click ‘See results’ I expect to see response based on counted flagged choices. I created two functions, HType() and CheckQuiz() which works as expected separately, but together the CheckQuiz() does not work.

After deep testing I concluded that the document.addEventListener("DOMContentLoaded" element and the for loop block in HType() are causing failure on CheckQuiz() functionality. I have searched the net for possible solutions to make these two functions work together, (eg. element.addEventListener('event',…) but no success.

/* Change the color of the check box and count answer */
document.addEventListener("DOMContentLoaded", function HType() {
  let a = document.querySelectorAll(".mountain");
  let b = document.querySelectorAll(".beach");
  let questions = 6;
  var a_count = 0;
  var b_count = 0;
  var results;

  for (let i = 0; i < questions; i++) {
    a[i].addEventListener("click", function() {
      a[i].style.backgroundColor = "orange";
      b[i].style.backgroundColor = "gray";
      a_count++;
    });
    b[i].addEventListener("click", function() {
      a[i].style.backgroundColor = "gray";
      b[i].style.backgroundColor = "orange";
      b_count++;
    });
  }

  if (a_count == 0 && b_count == 0) {
    results = "n";
  } else if (a_count > b_count) {
    results = "a";
  } else {
    results = "b";
  }
  return results;
});


let x = HType();

/* Based on the returned value form above function return the responce */
function CheckQuiz() {
  if (x == "a") {
    document.addEventListener("click", HType,
      document.getElementById("HolType").innerHTML = "You are a mountain type");
  } else if (x == "b") {
    document.addEventListener("click", HType,
      document.getElementById("HolType").innerHTML = "You are a beach type");
  } else {
    document.addEventListener("click", HType,
      document.getElementById("HolType").innerHTML = "You have not selected your choice");
  }
}
<p> Fun quiz<br> What type of holiday does suit you most?
  <br>

  <ol>
    <form onclick="HType()">
      <li>Question one: bla </li>
      <button type="button" class="mountain">a</button> You prefer this<br>
      <button type="button" class="beach">b</button> You prefer that

      <li>Question two: bla</li>
      <button type="button" class="mountain">a</button> You prefer this<br>
      <button type="button" class="beach">b</button> You prefer that

      <li>question three: bla</li>
      <button type="button" class="mountain">a</button> You prefer this<br>
      <button type="button" class="beach">b</button> You prefer that<br><br>

    </form>
  </ol>
  <form>
    <button type="button" onclick="CheckQuiz()">See Results!</button>
    <h3 id="HolType" style="text-align: center;"></h3>
  </form>
</p>

Answer

I think you made your code unnecessarily complex. First of all, it’s not clear why did you use forms, after all, you don’t submit anything. Also, if you want to add another option as “c”, your code will become unmaintainable easily. That’s why I’ve made some changes.

let answers = {
  a: 0,
  b: 0,
  c: 0
};

let outputs = {
  a: "You are a mountain type",
  b: "You are a beach type",
  c: "You are a cave type",
  x: "You love multiple places",
  z: "You have not selected your choice"
}

const makeSelection = (answer) => {
  answer.closest(".answers")
    .querySelectorAll(".answer")
    .forEach(x => {
      if (x.classList.contains('selected')) {
        answers[x.dataset.value]--
        x.classList.remove('selected')
      }
    })
  answer.classList.add('selected');
  answers[answer.dataset.value]++
}


document.querySelectorAll(".answer")
   .forEach(answer => answer.addEventListener('click',
      () => makeSelection(answer)
   )
);

const checkQuiz = () => {
  let sorted = Object.entries(answers).sort(([,a],[,b]) => b - a)
  let result = sorted[0][1] > sorted[1][1] ? sorted[0][0] : sorted[0][1] > 0 ? "x" : "z";
  document.querySelector("#HolType").innerText = outputs[result];
}
.selected {
  background: orange
}
<p> Fun quiz<br> What type of holiday does suit you most?
  <br>

  <ol>
    <form>
      <li>Question one: bla </li>
      <div class="answers">
        <button type="button" class="answer mountain" data-value="a">a</button> You prefer this<br>
        <button type="button" class="answer beach" data-value="b">b</button> You prefer that<br>
        <button type="button" class="answer beach" data-value="c">c</button> Or this, maybe
      </div>
      <li>Question two: bla</li>
      <div class="answers">
        <button type="button" class="answer mountain" data-value="a">a</button> You prefer this<br>
        <button type="button" class="answer beach" data-value="b">b</button> You prefer that<br>
        <button type="button" class="answer beach" data-value="c">c</button> Or this, maybe
      </div>
      <li>question three: bla</li>
      <div class="answers">
        <button type="button" class="answer mountain" data-value="a">a</button> You prefer this<br>
        <button type="button" class="answer beach" data-value="b">b</button> You prefer that<br>
        <button type="button" class="answer beach" data-value="c">c</button> Or this, maybe
      </div>
      <li>question four: bla</li>
      <div class="answers">
        <button type="button" class="answer mountain" data-value="a">a</button> You prefer this<br>
        <button type="button" class="answer beach" data-value="b">b</button> You prefer that<br>
        <button type="button" class="answer beach" data-value="c">c</button> Or this, maybe
      </div>
    </form>
  </ol>
  <form>
    <button type="button" onclick="checkQuiz()">See Results!</button>
    <h3 id="HolType" style="text-align: center;"></h3>
  </form>
</p>

Leave a Reply

Your email address will not be published. Required fields are marked *