按照用户使用Java脚本将鼠标悬停在悬停的数字上的顺序打印

问题描述

我制作了此网页，其中随机数从1到9出现在平方格中。

我需要的是：当用户将鼠标悬停在任何数字上时，该数字将消失，最后当用户将所有数字都悬停时，将出现一条警报，显示以用户悬停的顺序显示所有数字。

这是我的尝试：我只能使数字消失，但是如何以用户悬停的相同顺序在警报中打印它们：

document.getElementById("s1").addEventListener("mouSEOver",function(){
document.getElementById("s1").style.visibility = "hidden";})
document.getElementById("s2").addEventListener("mouSEOver",function(){
document.getElementById("s2").style.visibility = "hidden"; })
document.getElementById("s2").addEventListener("mouSEOver",function(){
document.getElementById("s2").style.visibility = "hidden"; })
document.getElementById("s3").addEventListener("mouSEOver",function(){
document.getElementById("s3").style.visibility = "hidden";})
document.getElementById("s4").addEventListener("mouSEOver",function(){
document.getElementById("s4").style.visibility = "hidden";})
document.getElementById("s5").addEventListener("mouSEOver",function(){
document.getElementById("s5").style.visibility = "hidden";})
document.getElementById("s6").addEventListener("mouSEOver",function(){
document.getElementById("s6").style.visibility = "hidden";})
document.getElementById("s7").addEventListener("mouSEOver",function(){
document.getElementById("s7").style.visibility = "hidden";})
document.getElementById("s8").addEventListener("mouSEOver",function(){
document.getElementById("s8").style.visibility = "hidden";})
document.getElementById("s9").addEventListener("mouSEOver",function(){
document.getElementById("s9").style.visibility = "hidden";})
function alertAfterHovering() {
alert(document.getElementById("s1").innerHTML+" "+document.getElementById("s2").innerHTML+" 
"+document.getElementById("s3").innerHTML+" "+document.getElementById("s4").innerHTML+" 
"+document.getElementById("s5").innerHTML+" "+document.getElementById("s6").innerHTML+" 
"+document.getElementById("s7").innerHTML+" "+document.getElementById("s8").innerHTML+" 
"+document.getElementById("s9").innerHTML)
 }

解决方法

您可以使用eventListener并使用一些动态代码来做到这一点：

var squares = document.getElementsByClassName("square");

for (square of squares) {
  square.addEventListener("mouseenter",addNumber);
}

var total = [];

function addNumber(e) {
  if(e.target.textContent) {
    total.push(e.target.textContent);
    e.target.textContent = "";
    if(total.length === squares.length) {
      alert(total);
    }
  }
}

.square {
  width: 29%;
  height: 50px;
  background: #00ffff;
  margin: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  display: flex;
  flex: 0 1 33%;
  flex-wrap: wrap;
}

<div class="box">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
  <div class="square">4</div>
  <div class="square">5</div>
  <div class="square">6</div>
  <div class="square">7</div>
  <div class="square">8</div>
  <div class="square">9</div>
</div>

创建一个数组以在用户悬停时捕获数字。然后使用该数组显示警报。

var numbers = [];
// repeat this for each element Or find a better way of targeting the elements so you don't have to hard code for each one
document.getElementById("s1").addEventListener("mouseover",function(){
    var thisNumber = document.getElementById("s1").innerHTML;
    // you need some way of making sure hovering over an invisible element does not add a duplicate to the array
    if (!numbers.includes(thisNumber) {
        numbers.push(thisNumber);  
    }
    document.getElementById("s1").style.visibility = "hidden";
});

function alertAfterHovering() {
    alert(numbers);
}

javascript mouseover