通过鼠标在事件javascript上增加分数

Question

function createFlake(){
var el= document.createElement('i');
el.classList.add("fab");
el.classList.add("fa-bitcoin")
el.classList.add("fa-7x")
el.style.left=Math.random()* window.innerWidth+'px';
el.style.animationDuration= Math.random()*3+ 3 +'s';
el.style.opacity=Math.random();
let score=5;
el.addEventListener('mouseover',()=>{
score=score+1;
console.log(score)
el.classList.add('fa-bitcoin-hover');
var s=document.getElementById('scor');
s.innerText="Score: "+score;
})

document.body.appendChild(el)
}

使用上面的代码，我创建了从上到下的图标，当我这样做的时候，每次我把鼠标放在图标上时，我都希望它能提高分数。一切都很好，除了我一直得到相同的分数或分数+1。无法提高分数。

Answer 1

将let score移动到函数之外，除非您需要每个薄片都有自己的分数

let score = 5;
const s = document.getElementById('scor');
function createFlake() {
var el = document.createElement('i');
el.classList.add("fab");
el.classList.add("fa-bitcoin")
el.classList.add("fa-7x")
el.style.left = Math.random() * window.innerWidth + 'px';
el.style.animationDuration = Math.random() * 3 + 3 + 's';
el.style.opacity = (Math.random()+0.009).toFixed(2); // or you get invisible flakes
el.addEventListener('mouseover', () => {
score++
el.classList.add('fa-bitcoin-hover');
s.innerText = "Score: " + score;
})
document.body.appendChild(el)
}
createFlake()
createFlake()
createFlake()
createFlake()

.fa-bitcoin-hover { border: 1px solid black; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<span id="scor">Score: 5</span>
<hr/>

如果你每次击中一个薄片都会得到分数，即使是多次击中同一薄片，你也需要这样的东西：

const s = document.getElementById('scor');
const showScore = () => {
let total = 0;
[...document.querySelectorAll(".fab")].forEach(el => total += +el.title)
s.innerHTML = total;
}
function createFlake() {
var el = document.createElement('i');
el.classList.add("fab");
el.classList.add("fa-bitcoin")
el.classList.add("fa-7x")
el.style.left = Math.random() * window.innerWidth + 'px';
el.style.animationDuration = Math.random() * 3 + 3 + 's';
el.style.opacity = (Math.random()+0.009).toFixed(2); // or you get invisible flakes
let score = 5;
el.addEventListener('mouseover', () => {
score++
el.classList.add('fa-bitcoin-hover');
el.title = score;
showScore();
})
document.body.appendChild(el)
}
createFlake()
createFlake()
createFlake()
createFlake()

.fa-bitcoin-hover { border: 1px solid black; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<div>Score: <span id="scor">5</span>
<hr/>

Answer 2

您可以添加score作为元素的属性，而不是使用变量score。只需el.score，请参阅下面的代码：

el.score = 5;
el.addEventListener('mouseover', ()=> {
el.score++;
console.log(el.score);
el.classList.add('fa-bitcoin-hover');
let s = document.getElementById('score');
s.innerText = "Score:  " + el.score;
});