我正在尝试用JavaScript构建一个猜谜游戏。我已经在一个div中创建了所有的数字。我想要的是，当我点击一个div时，如何将第一个和第二个进行比较，并将结果显示为正确或错误
// ? number clicked logic
const numberClicked = document.querySelectorAll('.number')
numberClicked.forEach((number) => {
number.addEventListener("click", (e) => {
if (number.textContent == "") {
number.textContent = randomNumber()
number.style.background = "orangered"
let numberClickOne = e.target.textContent
console.log("click " + numberClickOne);
}
})
})
// ? generates random number each time it is called
function randomNumber() {
let randomDigit = Math.floor(Math.random() * 8 + 1)
return randomDigit
}<div class="number number1"></div>
<div class="number number2"></div>
<div class="number number3"></div>
<div class="number number4"></div>
<div class="number number5"></div>
<div class="number number6"></div>
<div class="number number7"></div>
<div class="number number8"></div>
<div class="number number9"></div>
<div class="number number10"></div>
<div class="number number11"></div>
<div class="number number12"></div>
<div class="number number13"></div>
<div class="number number14"></div>
<div class="number number15"></div>
<div class="number number16"></div>
<div class="number number17"></div>
<div class="number number18"></div>
<div class="number number19"></div>
<div class="number number20"></div>
<div class="number number21"></div>
<div class="number number22"></div>
<div class="number number23"></div>
<div class="number number24"></div>
<div class="number number25"></div>在我的回答中，为了简单起见，我正在动态创建数字div。我将把div的数字添加到一个数据属性中。
我正在向数字div的父对象添加一个事件处理程序，并检查单击的目标是否包括数字类。
在我的点击处理程序中，我只获取数据属性编号，并将其与随机生成的编号进行比较。
我还更新了你的随机函数，以接受最大值的参数，这样你就可以轻松控制最大
function randomNumber(max) {
let randomDigit = Math.floor(Math.random() * max + 1)
return randomDigit
}
let numbers = document.querySelector(".numbers");
for (let x = 1; x <= 25; x++) {
let number = document.createElement("div");
number.classList.add("number");
number.innerText = x
number.setAttribute("data-number", x)
numbers.appendChild(number)
}
numbers.addEventListener("click", function(e) {
if (e.target.className.includes("number")) {
let rand = randomNumber(25)
if(e.target.dataset.number == rand){
console.log("GOOD!",rand);
}
else{console.log("WRONG! it was ",rand);}
}
});.number {
display: inline-block;
padding: 4px;
cursor: pointer
}<div class="numbers"></div>以下是使用事件委派的解决方案index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./index.js" async></script>
</head>
<body>
<div class="number">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
</div>
</body>
</html>
您的javascript逻辑index.js
document.querySelector(".number").addEventListener("click",(e)=>{
//creating a random number
let randomDigit = Math.floor(Math.random() * 8 + 1)
//storing selected number
let Selectednum=+e.originalTarget.innerText
// + to convert number from type string to number
//now checking with conditions if the if else
if(Selectednum===randomDigit){
alert("hurrah! You won")
}
else{
alert("Better Luck Next Time ")
}
})