counter: with click, the number should increase by one

Question

I'm a beginner when it comes to Javascript. With click, the number should increase by one. I don't want to use tag IDs here, but as if made in class.

I am trying to give you a quick overview of the ClapsCounter here. The clap clicks are stored in the respective _ClapsCounter.txt file and the vote is stored in the browser localStorage as "applaudiert". Click on the counter to increase the value of all divs with the class "ClapsCounterCount".

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

 let TxtContainer = Array.from(document.querySelectorAll('.ClapsCounterTxtContainer'));
 let beforClick = "Applaudieren Sie diesen Artikel";
 let afterClick = "Danke für Ihren Applaus!";
 let alreadyClick = "Danke, Sie haben schon applaudiert!";

 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);
  }
}

 
   View @media (min-width: 960px)
   123 Applause erhalten
   
   
 

 
   View @media (min-width: 1200px)
   123 Applause erhalten

Wrong with these lines !?

    // 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);

expected output before click

123

expected output after click

124

Please see it in JSFiddle

Update & Solved:

Thanks for your the answer from T.J. Crowder.

The line

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

with this addition

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

solved my problem.

user_157247 · Answer

Yes, as you've said in a comment, the problem is here:

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

forEach doesn't return anything, so plus will always be undefined. ++undefined is NaN.

Instead of trying to store the number in advance, use it as it is when the click occurs. Also, I recommend parsing it intentionally rather than relying on implicit conversion from the string you get from innerHTML to a number:

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

Here's y our code with that change (I also removed plus entirely):

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

 let TxtContainer = Array.from(document.querySelectorAll('.ClapsCounterTxtContainer'));
 let beforClick = "Applaudieren Sie diesen Artikel";
 let afterClick = "Danke für Ihren Applaus!";
 let alreadyClick = "Danke, Sie haben schon applaudiert!";

 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);
  }
}


   View @media (min-width: 960px)
   123 Applause erhalten
   
   
 

 
   View @media (min-width: 1200px)
   123 Applause erhalten

As you can see, it increments to 124 now.

FWIW, I've made a few other changes and marked them out with *** comments:

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 = "Applaudieren Sie diesen Artikel";
let afterClick = "Danke für Ihren Applaus!";
let alreadyClick = "Danke, Sie haben schon applaudiert!";

// *** 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;
            }
        }
    }
}));


   View @media (min-width: 960px)
   123 Applause erhalten
   
   
 

 
   View @media (min-width: 1200px)
   123 Applause erhalten

counter: with click, the number should increase by one

Update & Solved:

1 Answers