如何在 JavaScript 中获取首先单击哪个元素以及其次单击哪个元素？

Question

我正在尝试在 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>

Answer 1

这是您使用事件委托索引的解决方案。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 ")
}
})

Answer 2

在我的回答中，为了简单起见，我正在动态创建数字 div。 我将该 div 的数字添加到数据属性中。

我正在向数字 div 的父 object 添加一个事件处理程序，并检查单击的目标是否包含数字 class。

在我的点击处理程序中，我只获取数据属性编号并对照随机生成的编号进行检查。

我还更新了您的随机 function 以接受最大值的参数，这样您就可以轻松控制最大值。

 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>

如何在 JavaScript 中获取首先单击哪个元素以及其次单击哪个元素？

问题描述

2 个解决方案

解决方案1
0 2022-08-09 05:48:13

解决方案2
0 2022-08-09 19:31:03

如何在 JavaScript 中获取首先单击哪个元素以及其次单击哪个元素？

问题描述

2 个解决方案

解决方案1 0 2022-08-09 05:48:13

解决方案2 0 2022-08-09 19:31:03

解决方案1
0 2022-08-09 05:48:13

解决方案2
0 2022-08-09 19:31:03