计数器：点击，数字应该增加一

Question

我是 Javascript 的初学者。点击后，数字应增加一。我不想在这里使用标签 ID，但好像是在课堂上制作的。

我想在这里为您简要介绍一下 ClapsCounter。拍手点击存储在相应的 _ClapsCounter.txt 文件中，投票存储在浏览器 localStorage 中作为“applaudiert”。单击计数器以增加具有“ClapsCounterCount”类的所有 div 的值。

 let clicks = document.querySelectorAll('.ClapsCounterTrigger');
 let count = Array.from(document.querySelectorAll('.ClapsCounterCount'));

 let TxtContainer = Array.from(document.querySelectorAll('.ClapsCounterTxtContainer'));
 let beforClick = "<span class=\"muted italic\">Applaudieren Sie diesen Artikel</span>";
 let afterClick = "<span class=\"success italic\">Danke für Ihren Applaus!</span>";
 let alreadyClick = "<span class=\"warning italic\">Danke, Sie haben schon applaudiert!</span>";

 let i;
 TxtContainer.forEach(i => i.innerHTML = beforClick);

// something wrong here!?
// take the current number from the .ClapsCounterCount
 let plus = count.forEach(i => i.innerHTML);

 for (let i = 0; i < clicks.length; i++) {

   clicks[i].onclick = function () {
    // after the click increase the current click number with 1
    count.forEach(i => i.innerHTML = ++plus);
    TxtContainer.forEach(i => i.innerHTML = afterClick);
  }
}

 <div class="ClapsCounter">
   <h4>View @media (min-width: 960px)</h4>
   <p><span class="ClapsCounterCount">123<!-- '.$count.' --></span> <span>Applause erhalten</span></p>
   <p class="ClapsCounterTxtContainer"></p>
   <button class="ClapsCounterTrigger">Count +1 Button</button>
 </div>

 <div class="ClapsCounter large">
   <h4>View @media (min-width: 1200px)</h4>
   <p><span class="ClapsCounterCount">123<!-- '.$count.' --></span> <span>Applause erhalten</span></p>
   <p class="ClapsCounterTxtContainer"></p>
   <button class="ClapsCounterTrigger">Count +1 Button</button>
 </div>

这些行错了！？

    // something wrong here!?
    // take the current number from the .ClapsCounterCount
     let plus = count.forEach(i => i.innerHTML);

    // after the click increase the current click number with 1
     count.forEach(i => i.innerHTML = ++plus);

点击前的预期输出

123

点击后的预期输出

124

Please see it in JSFiddle

更新和解决：

感谢您来自T.J. Crowder 的answer。

线

count.forEach (i => i.innerHTML = ++ plus);

加上这个

count.forEach (element => element.innerHTML = parseInt (element.innerHTML, 10) + 1);

解决了我的问题。

Answer 1

是的，正如你在评论中所说，问题就在这里：

let plus = count.forEach(i => i.innerHTML);

forEach 不返回任何内容，因此plus 将始终为undefined。 ++undefined 是 NaN。

不要尝试提前存储数字，而是在点击发生时按原样使用它。另外，我建议有意解析它，而不是依赖从innerHTML 获得的字符串到数字的隐式转换：

count.forEach(element => element.innerHTML = parseInt(element.innerHTML, 10) + 1);

这是我们的更改代码（我还完全删除了plus）：

let clicks = document.querySelectorAll('.ClapsCounterTrigger');
 let count = Array.from(document.querySelectorAll('.ClapsCounterCount'));

 let TxtContainer = Array.from(document.querySelectorAll('.ClapsCounterTxtContainer'));
 let beforClick = "<span class=\"muted italic\">Applaudieren Sie diesen Artikel</span>";
 let afterClick = "<span class=\"success italic\">Danke für Ihren Applaus!</span>";
 let alreadyClick = "<span class=\"warning italic\">Danke, Sie haben schon applaudiert!</span>";

 let i;
 TxtContainer.forEach(i => i.innerHTML = beforClick);

 for (let i = 0; i < clicks.length; i++) {

   clicks[i].onclick = function () {
    // after the click increase the current click number with 1
    count.forEach(element => element.innerHTML = parseInt(element.innerHTML, 10) + 1);
    TxtContainer.forEach(i => i.innerHTML = afterClick);
  }
}

<div class="ClapsCounter">
   <h4>View @media (min-width: 960px)</h4>
   <p><span class="ClapsCounterCount">123<!-- '.$count.' --></span> <span>Applause erhalten</span></p>
   <p class="ClapsCounterTxtContainer"></p>
   <button class="ClapsCounterTrigger">Count +1 Button</button>
 </div>

 <div class="ClapsCounter large">
   <h4>View @media (min-width: 1200px)</h4>
   <p><span class="ClapsCounterCount">123<!-- '.$count.' --></span> <span>Applause erhalten</span></p>
   <p class="ClapsCounterTxtContainer"></p>
   <button class="ClapsCounterTrigger">Count +1 Button</button>
 </div>

如您所见，它现在增加到 124。

---

FWIW，我做了一些其他更改，并用*** cmets 标记出来：

let clicks = document.querySelectorAll('.ClapsCounterTrigger');
let count = Array.from(document.querySelectorAll('.ClapsCounterCount'));

//*** Standard JavaScript naming is that you wouldn't use a capital letter at
// the beginning of `txtContainer`, so I've changed it throughout
let txtContainer = Array.from(document.querySelectorAll('.ClapsCounterTxtContainer'));
let beforClick = "<span class=\"muted italic\">Applaudieren Sie diesen Artikel</span>";
let afterClick = "<span class=\"success italic\">Danke für Ihren Applaus!</span>";
let alreadyClick = "<span class=\"warning italic\">Danke, Sie haben schon applaudiert!</span>";

// *** The `let i` that was here declared a variable that wasn't used; I
// removed it 
txtContainer.forEach(i => i.innerHTML = beforClick);

// *** I suspect you want to increase the counter only in the counter div
//  where the button was, rather than increasing all of them. To do that,
// I've replaced your loop with the following:
clicks.forEach(btn => btn.addEventListener("click", function() {
    // *** Within this callback, `this` refers to the button that was
    // clicked. To use that feature, notice that this is a traditional
    // `function` function, not an arrow function. But the element is also
    // available as `currentTarget` on the event object this function
    // receives, so if you wanted to use an arrow function, you'd accept
    // a parameter and use the `currentTarget` property of it instead..
    // Starting from the button that was clicked, we can find the ancestor
    // .ClapsCounter element, and then only update the counter and text inside
    // it.
    const container = this.closest(".ClapsCounter");
    if (container) {
        const counter = container.querySelector(".ClapsCounterCount");
        if (counter) {
            counter.innerHTML = parseInt(counter.innerHTML) + 1;
            if (txt) {
                const txt = container.querySelector(".ClapsCounterTxtContainer");
                txt.innerHTML = afterClick;
            }
        }
    }
}));

<div class="ClapsCounter">
   <h4>View @media (min-width: 960px)</h4>
   <p><span class="ClapsCounterCount">123<!-- '.$count.' --></span> <span>Applause erhalten</span></p>
   <p class="ClapsCounterTxtContainer"></p>
   <button class="ClapsCounterTrigger">Count +1 Button</button>
 </div>

 <div class="ClapsCounter large">
   <h4>View @media (min-width: 1200px)</h4>
   <p><span class="ClapsCounterCount">123<!-- '.$count.' --></span> <span>Applause erhalten</span></p>
   <p class="ClapsCounterTxtContainer"></p>
   <button class="ClapsCounterTrigger">Count +1 Button</button>
 </div>