即使使用forEach()Javascript，函数也只运行一次

Question

我想使用我得到的片段使数字增加，并将其命名为"numberIncrease(("。但问题是函数只在第一个h1中运行。我在forEach循环中尝试了console.log，它确实检测到了这两个元素。

为什么我的代码只为其中一个数字运行？forEach确实检测到了这两个计数器，但它没有显示在代码中。

我应该尝试不同类型的循环吗？

<button id="button">test</button>
<h2 class="counter" data-count-start="500">788</h2>
<h2 class="counter" data-count-start="333">666</h2>

<script>
let test = true;
const button = document.getElementById('button');
let counter = document.querySelector('.counter');
button.addEventListener('click', function() {
if (test) {
document.querySelectorAll('.counter').forEach(counter=>{
numberIncrease();
console.log(counter)
})
} else {
console.log('no');
}
})
function numberIncrease() {
const counter = document.querySelector(".counter");
const tl = gsap.timeline();
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)")
.matches;
animateCount(counter);
function animateCount(el) {
const start = removeCommas(el.dataset.countStart);
const end = removeCommas(el.textContent);
tl.fromTo(
el,
{
innerText: start,
"--font-variation-weight": 300,
scale: reducedMotion ? 1 : 0.99
},
{
innerText: end,
snap: { innerText: 1 },
duration: reducedMotion ? 0 : 3,
ease: "linear",
onUpdate: () => {
el.innerHTML = formatNumber(el.innerText);
}
}
).to(el, {
scale: 1,
"--font-variation-weight": 600,
ease: "elastic.out(1, 0.2)",
duration: 1.2
});
}
function celebrate() {
setCelebrateClass(true);
}
function setCelebrateClass(enabled) {
counter.classList.toggle("celebrate", enabled);
}
function removeCommas(num) {
return num.replace(/,/g, "");
}
function formatNumber(num) {
return num.toString().replace(/(d)(?=(d{3})+(?!d))/g, "$1,");
}
}
</script>

Answer 1

<button id="button">test</button>
<h1 class="counter" data-count-start="500">788</h1>
<h1 class="counter" data-count-start="333">666</h1>

<script>
let test = true;
const button = document.getElementById('button');
let counter = document.querySelector('.counter');

function numberIncrease(counter) { //edited line
if (counter) {//edited line
const tl = gsap.timeline();
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)")
.matches;
animateCount(counter);
function animateCount(el) {
const start = removeCommas(el.dataset.countStart);
const end = removeCommas(el.textContent);
tl.fromTo(
el, {
innerText: start,
"--font-variation-weight": 300,
scale: reducedMotion ? 1 : 0.99
}, {
innerText: end,
snap: {
innerText: 1
},
duration: reducedMotion ? 0 : 3,
ease: "linear",
onUpdate: () => {
el.innerHTML = formatNumber(el.innerText);
}
}
).to(el, {
scale: 1,
"--font-variation-weight": 600,
ease: "elastic.out(1, 0.2)",
duration: 1.2
});
}
function celebrate() {
setCelebrateClass(true);
}
function setCelebrateClass(enabled) {
counter.classList.toggle("celebrate", enabled);
}
function removeCommas(num) {
return num.replace(/,/g, "");
}
function formatNumber(num) {
return num.toString().replace(/(d)(?=(d{3})+(?!d))/g, "$1,");
}
console.dir(counter);
} else {
console.error('Counter not found!') //edited line
}
}
button.addEventListener('click', function() {
if (test) {
console.log('yes');
document.querySelectorAll('.counter').forEach(counter => {
numberIncrease(counter); //edited line
console.log()
})
} else {
console.log('no');
}
})
</script>