4 Digit number guessing game,syntax or logic issue?

Question

I'm new to JavaScript,and i've tried to create a game where you get to guess a random generated combination of 4 numbers. You get to input 4 digits,and some symbols will show up based on your input:

• × - If you guessed a number that's in the combination, but not the correct index.
• ¤ - If you guessed a number that's in the combination and its index as well.

But these symbols don't show up the way i though they would. (For example,the random generated number was: "3,3,0,3". When you do input "3,3,0,3", the output should be ¤¤¤¤, but for some reason it's ¤×¤×).

In the code, x1, x2, x3 and x4 are the variables where the random generated number is located. The xy1, xy2, xy3 and xy4 are the variables where your input is located. And those are later compared.

Now, is syntax or logic flawed?

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

var x1 = (getRandomInt(6));
var x2 = (getRandomInt(6));
var x3 = (getRandomInt(6));
var x4 = (getRandomInt(6));

/// The generated nuber a player needs to guess will show up in console.For testing purposes.
console.log("The generated digits:" + x1 + "," + x2 + "," + x3 + "," + x4);

document.body.innerHTML = ("This program generates 4 random digits (from 0 to 5). The point of this game is to guess what are those 4 digits.");
document.body.innerHTML += ("Symbols:<br> This symbol will show if you guessed a number, but not its index: × <br> This symbol will show if you guessed a number and its index: ¤. <br>If you didn't guess a number right, no symbol will show up.<br>You can press the button 'guess a number' to try again.<br>");

function try1() {
  let xy1 = prompt("Enter first number:");
  if (xy1 == x1) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy1 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy1 == x3) {
    document.body.innerHTML += (" × ");
  } else if (xy1 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  let xy2 = prompt("Enter second number:");
  if (xy2 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy2 == x2) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy2 == x3) {
    document.body.innerHTML += (" × ");
  } else if (xy2 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  let xy3 = prompt("Enter third number:");
  if (xy3 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy3 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy3 == x3) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy3 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  let xy4 = prompt("Enter fourth number:");
  if (xy4 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy4 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy4 == x3) {
    document.body.innerHTML += (" × ");
  } else if (xy4 == x4) {
    document.body.innerHTML += (" ¤ ");
  } else {
    document.body.innerHTML += (" ");
  }

  document.body.innerHTML += ("<br>Your guess:" + xy1 + "," + xy2 + "," + xy3 + "," + xy4 + "<br>");
}

function show() {
  document.body.innerHTML += ("<br>Number generated:" + x1 + "," + x2 + "," + x3 + "," + x4);
}

try1();

Answer 1

Seems like a logic error to me, but one that only occurs when you have duplicate numbers in the input (like 3303, due to the tripled 3's). So this portion of the code:

let xy2 = prompt("Enter second number:");
if (xy2 == x1) {
    document.body.innerHTML += (" × ");
} else if (xy2 == x2) {
    document.body.innerHTML += (" ¤ ");
} else if (xy2 == x3) {
    document.body.innerHTML += (" × ");
} else if (xy2 == x4) {
    document.body.innerHTML += (" × ");
} else {
    document.body.innerHTML += (" ");
}

is causing the issue. This is because it's not moving on to check the rest of the conditions after the first one fires. EG, when the number and answer are both 3303, we'll enter the first branch, since 3 (our second inputed number) is equal to 3 (our first generated number), which means we write a ×.

The solution is to realize that we should always try to write a ¤ if possible, which means that has to be the first condition we check. So if you re-order your if statements so that the ¤ is always the first branch, this should fix it. See this snippet:

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

// For testing, setting manually to 3303
var x1 = 3 // (getRandomInt(6));
var x2 = 3 // (getRandomInt(6));
var x3 = 0 // (getRandomInt(6));
var x4 = 3 // (getRandomInt(6));

/// The generated nuber a player needs to guess will show up in console.For testing purposes.
console.log("The generated digits:" + x1 + "," + x2 + "," + x3 + "," + x4);

document.body.innerHTML = ("This program generates 4 random digits (from 0 to 5). The point of this game is to guess what are those 4 digits.");
document.body.innerHTML += ("Symbols:<br> This symbol will show if you guessed a number, but not its index: × <br> This symbol will show if you guessed a number and its index: ¤. <br>If you didn't guess a number right, no symbol will show up.<br>You can press the button 'guess a number' to try again.<br>");

function try1() {
  // Already in the correct order
  let xy1 = prompt("Enter first number:");
  if (xy1 == x1) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy1 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy1 == x3) {
    document.body.innerHTML += (" × ");
  } else if (xy1 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  // Note that the xy2 == x2 is moved to the first condition
  let xy2 = prompt("Enter second number:");
  if (xy2 == x2) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy2 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy2 == x3) {
    document.body.innerHTML += (" × ");
  } else if (xy2 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  // Again note the reorder:
  let xy3 = prompt("Enter third number:");
  if (xy3 == x3) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy3 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy3 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy3 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  // And once more:
  let xy4 = prompt("Enter fourth number:");
  if (xy4 == x4) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy4 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy4 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy4 == x3) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  document.body.innerHTML += ("<br>Your guess:" + xy1 + "," + xy2 + "," + xy3 + "," + xy4 + "<br>");
}

function show() {
  document.body.innerHTML += ("<br>Number generated:" + x1 + "," + x2 + "," + x3 + "," + x4);
}

try1();