我想从用户输入的数字和生成的数字中找到匹配的数字并突出显示匹配

Question

我想从用户输入的数字和生成的数字中找到匹配的 数字并突出显示匹配的数字。但问题是生成数字时，它与用户号码的位置匹配并突出显示。是这样的。

用户号码1 2 3 4 5 6（匹配号码高亮显示）

生成的数字 4 10 8 1 7 9

错误图片：

var userNumber1 = "displayUserNum1";
var userNumber2 = "displayUserNum2";
var userNumber3 = "displayUserNum3";
var userNumber4 = "displayUserNum4";
var userNumber5 = "displayUserNum5";
var userNumber6 = "displayUserNum6";

var lotteryNumber1 = "firstLotteryNum";
var lotteryNumber2 = "secondLotteryNum";
var lotteryNumber3 = "thirdLotteryNum";
var lotteryNumber4 = "fourthLotteryNum";
var lotteryNumber5 = "fifthLotteryNum";
var lotteryNumber6 = "sixthLotteryNum";
var lotteryNumber7 = "seventhLotteryNum";

var displayUserNum1 = window.prompt("Enter your first Number");
document.getElementById("displayUserNum1").innerHTML = displayUserNum1;

var displayUserNum2 = window.prompt("Enter your second Number");
document.getElementById("displayUserNum2").innerHTML = displayUserNum2;

var displayUserNum3 = window.prompt("Enter your third Number");
document.getElementById("displayUserNum3").innerHTML = displayUserNum3;

var displayUserNum4 = window.prompt("Enter your fourth Number");
document.getElementById("displayUserNum4").innerHTML = displayUserNum4;

var displayUserNum5 = window.prompt("Enter your fifth Number");
document.getElementById("displayUserNum5").innerHTML = displayUserNum5;

var displayUserNum6 = window.prompt("Enter your sixth Number");
document.getElementById("displayUserNum6").innerHTML = displayUserNum6;

lotteryNumber1 = Math.floor(Math.random() * 10) + 1;
lotteryNumber2 = Math.floor(Math.random() * 10) + 1;
lotteryNumber3 = Math.floor(Math.random() * 10) + 1;
lotteryNumber4 = Math.floor(Math.random() * 10) + 1;
lotteryNumber5 = Math.floor(Math.random() * 10) + 1;
lotteryNumber6 = Math.floor(Math.random() * 10) + 1;
lotteryNumber7 = Math.floor(Math.random() * 10) + 1;

document.getElementById("draw1").innerHTML = lotteryNumber1;
document.getElementById("draw2").innerHTML = lotteryNumber2;
document.getElementById("draw3").innerHTML = lotteryNumber3;
document.getElementById("draw4").innerHTML = lotteryNumber4;
document.getElementById("draw5").innerHTML = lotteryNumber5;
document.getElementById("draw6").innerHTML = lotteryNumber6;
document.getElementById("bonus").innerHTML = lotteryNumber7;

document.getElementById("bonus").classList.add("highlightBonus");

if ("displayUserNum1".match(lotteryNumber7)) {
  document.getElementById("displayUserNum1").classList.add("highlightBonusWin");
} else if ("displayUserNum2".match(lotteryNumber7)) {
  document.getElementById("displayUserNum2").classList.add("highlightBonusWin");
}

if ("displayUserNum3".match(lotteryNumber7)) {
  document.getElementById("displayUserNum3").classList.add("highghtBonusWin");
} else if ("displayUserNum4".match(lotteryNumber7)) {
  document.getElementById("displayUserNum4").classList.add("highlightBonusWin");
}

if ("displayUserNum5".match(lotteryNumber7)) {
  document.getElementById("displayUserNum5").classList.add("highghtBonusWin");
} else if ("displayUserNum6".match(lotteryNumber7)) {
  document.getElementById("displayUserNum6").classList.add("highlightBonusWin");
}

if ("displayUserNum1".match(lotteryNumber1)) {
  document.getElementById("displayUserNum1").classList.add("highlightWin");
} else if ("displayUserNum2".match(lotteryNumber2)) {
  document.getElementById("displayUserNum2").classList.add("highlightWin");
}

if ("displayUserNum3".match(lotteryNumber3)) {
  document.getElementById("displayUserNum3").classList.add("highlightWin");
} else if ("displayUserNum4".match(lotteryNumber4)) {
  document.getElementById("displayUserNum4").classList.add("highlightWin");
}

if ("displayUserNum5".match(lotteryNumber5)) {
  document.getElementById("displayUserNum5").classList.add("highlightWin");
} else if ("displayUserNum6".match(lotteryNumber6)) {
  document.getElementById("displayUserNum6").classList.add("highlightWin");
}

const d = new Date();
document.getElementById("lmd").innerHTML = d;

Answer 1

使用数组而不是大量单独的变量。然后，您可以使用循环摆脱所有重复代码。并且可以使用includes()方法测试每个用户输入是否在彩票号码数组中。

let userNumbers = [];
for (let i = 1; i <= 6; i++) {
  let userNum = parseInt(window.prompt(`Enter number ${i}`));
  userNumbers.push(userNum);
  document.getElementById(`displayUserNum${i}`).innerHTML = userNum;
}

let lotteryNumbers = [];
for (let i = 1; i <= 6; i++) {
  let lotteryNumber = Math.floor(Math.random() * 10) + 1;
  lotteryNumbers.push(lotteryNumber);
  document.getElementById(`draw${i}`).innerHTML = lotteryNumber;
}

document.getElementById("bonus").classList.add("highlightBonus");

for (let i = 0; i < 6; i++) {
  if (lotteryNumbers.includes(userNumbers[i])) {
    document.getElementById(`displayUserNum${i+1}`).classList.add("highlightBonusWin");
  }
}

const d = new Date();
document.getElementById("lmd").innerHTML = d;

我想从用户输入的数字和生成的数字中找到匹配的数字并突出显示匹配

I want to find the matching numbers from the user input numbers and generated numbers and highlight the matchings

javascript

arrays

numbers

match