Using an EventListener on the Element that calls a counter function - Javascript

Question

Goal: Write a function that is called by the eventListener click event of an IMG. The function will use a conditional to see on which ElementID called the function, then initialize the on accumulator to that value, then add 1 and change the innerHTML to show that new value. Key goal is to make this occur with out have 3 similar identical functions

Code Thus Far

let likeCount = !NaN;

var classname = document.getElementsByClassName("like-heart");

function likeCounter() {
/*Note the elementID is very similar to the ELementID of the accumulator element - but not the same.*/
       if (this.getElementById === "ft-recipe-like") {
        likeCount = Number(document.getElementById('featured-likes').innerText);
        likeCount += 1;
        document.getElementById('featured-likes').innerText = likeCount;
    } else if (this.getElementById === "macaroon-like") {
        likeCount = Number(document.getElementById('macaroon-likes').innerText);
        likeCount += 1;
        document.getElementById('macaroon-likes').innerText = likeCount;
    } else if (this.getElementById === 'brulee-like') {
        likeCount = Number(document.getElementById('brulee-likes').innerText);
        likeCount += 1;
        document.getElementById('brulee-likes').innerText = likeCount;
    }    
for (var i = 0; i < classname.length; i++) {
        classname[i].addEventListener('click', likeCounter, false);
    }
}
}
    }
    for (var i = 0; i < classname.length; i++) {
        classname[i].addEventListener('click', likeCounter, false);
    }
}
}

For when you notice the problem: [Adding two numbers concatenates them instead of calculating the sum](https://stackoverflow.com/q/14496531) — VLAZ, Feb 03 '22 at 06:39
And what is the problem that you have? What do you expect that `this.getElementById ===` would do? — t.niese, Feb 03 '22 at 06:40

score 2 · Answer 1 · answered Feb 03 '22 at 06:44

You can have a map of acc id to Dom node id, and write a generic function to increment the likeCount.

let likeCount = !NaN;

var classname = document.getElementsByClassName("like-heart");

const accIdToDomIdMap = {
  'ft-recipe-like': 'featured-likes',
  'macaroon-like': 'macaroon-likes',
  'brulee-likes': 'brulee-likes'
}

function likeCounter() {
/*Note the elementID is very similar to the ELementID of the accumulator element - but not the same.*/
   if(accIdToDomIdMap.hasOwnProperty(this. getElementById)) {
      const domId = document.getElementById(accIdToDomIdMap[this.getElementById]);
      likeCount = (+domId.innerText || 0) + 1;
      domId.innerText = likeCount;
   }
}
function newFunction() {
    for (var i = 0; i < classname.length; i++) {
        classname[i].addEventListener('click', likeCounter, false);
    }
  }
}

I still need the for loop at the bottom correct? The first function only is the counter, so the loop is needed to add the listsner. Also I am going to wrap the `likeCount = Number((+domId.innerText || 0))+ 1;` As the HTML element will be seen as as string and concat vs sum. — Terry Brooks Jr, Feb 03 '22 at 07:00
@TerryBrooksJr Instead of having a for loop, you should attach the event listener to the parent of these images. Also Number((+domId.innerText || 0))+ 1 is not going to do anything. +dom.innerText coerces the string to number. And the function I suggested achieves the Goal of "Key goal is to make this occur with out have 3 similar identical functions" — Kanishk Anand, Feb 03 '22 at 07:42

Using an EventListener on the Element that calls a counter function - Javascript

1 Answers1