Function call with onClick

Question

Still working on my fortune teller game. I can't figure out how to get to the "next level" meaning the next function. Because the onclick is set for levelA(). Is there a way to get the onclick to change? It is the same logic as before:

• Screen A: 1,2,3,4 // click a number and get screen B (2/4)or C(1/3)
• Screen B: 5,6,7,8// click a number and get screen B (6/8)or C(5/7)
• Screen C: 9,10,11,12// click a number and get screen B (10/12)or C(9/11)
• Screen D: //has fortune on screen

A typical game (based on numbers clicked) would go:

• Screen A: Click 2 go to screen B
• Screen B: Click 6 go to screen B
• Screen B: Click 8 go to screen D
• Screen D: fortune

or

• Screen A: Click 1 go to screen C
• Screen B: Click 10 go to screen B
• Screen B: Click 5 go to screen D
• Screen D: fortune

Here is a JsFiddle and the code!

function startGame() {
  document.getElementById("s1").innerHTML = "1";
  document.getElementById("s2").innerHTML = "2";
  document.getElementById("s3").innerHTML = "3";
  document.getElementById("s4").innerHTML = "4";
}

function levelA(s1, s2, s3, s4) {
  if (s2 || s4) {
    levelB();
  } else {
    levelC();
  }
}

function levelB() {
  document.getElementById("s1").innerHTML = "5";
  document.getElementById("s2").innerHTML = "6";
  document.getElementById("s3").innerHTML = "7";
  document.getElementById("s4").innerHTML = "8";
  if (s2 || s4) {
    levelB2();
  } else {
    levelC2();
  }
}

function levelB2() {
  document.getElementById("s1").innerHTML = "5";
  document.getElementById("s2").innerHTML = "6";
  document.getElementById("s3").innerHTML = "7";
  document.getElementById("s4").innerHTML = "8";
  if (s2 || s4) {
    levelD();
  } else {
    levelD2();
  }
}

function levelC() {
  document.getElementById("s1").innerHTML = "9";
  document.getElementById("s2").innerHTML = "10";
  document.getElementById("s3").innerHTML = "11";
  document.getElementById("s4").innerHTML = "12";
  if (s2 || s4) {
    levelC2();
  } else {
    levelB2();
  }
}

function levelC2() {
  document.getElementById("s1").innerHTML = "9";
  document.getElementById("s2").innerHTML = "10";
  document.getElementById("s3").innerHTML = "11";
  document.getElementById("s4").innerHTML = "12";
  if (s2 || s4) {
    levelD();
  } else {
    levelD2();
  }
}

function levelD(s1, s2, s3, s4) {
  if (s1) {
    document.getElementById("s1").innerHTML = "Good Things Will Come Your Way";
  } else if (s2) {
    document.getElementById("s2").innerHTML = "Outlook Doesn't Look Good";
  } else if (s3) {
    document.getElementById("s3").innerHTML = "Today Is Your Lucky Day";
  } else if (s4) {
    document.getElementById("s3").innerHTML = "Toady Is Not Your Lucky Day";
  }
}

function levelD2() {
  if (s1) {
    document.getElementById("s1").innerHTML = "You Will Find Good Fortune";
  } else if (s2) {
    document.getElementById("s2").innerHTML = "Your Wish Will Come True";
  } else if (s3) {
    document.getElementById("s3").innerHTML = "Your Wish Will Not Come True";
  } else if (s4) {
    document.getElementById("s3").innerHTML = "Things Do Not Look Good";
  }
}

Thank you for the help!

Answer 1

You have accepted arguments in function levelA(s1, s2, s3, s4),but no other functions are accepting four parameters, eg levelD2() function you checking if(s1) condition but heart it always false, because here value of s1 is "undefined". so add parameters in function to accept values from caller.