I've been attempting to incorporate the "addEventListener" feature into my code. Despite following an example, I can't seem to get it to work. Is there something I'm missing or doing wrong?
<body>
<div class="emoji-row ng-scope" ng-repeat="...">
<div class="emoji-wrapper">
<div class="emoji-reactions">
<div class="emoji-reactions-main">
:)
</div>
<div class="emoji-reactions-panel">
<ul>
<li> :) </li>
<li> :( </li>
</ul>
</div>
</div>
</div>
<span class="helloemoji"></span>
</div>
<script>
const tag = document.createElement("span");
tag.className = 'helloemoji';
document.getElementsByClassName("emoji-row")[0].appendChild(tag);
const emojis = document.getElementsByClassName("emoji-reactions-panel")[0].getElementsByTagName("li");
console.log(emojis.length); /* 5 */
Array.from(emojis).forEach(function (item) {
console.log("item", item);
item.addEventListener('click', emojiClickfunc);
});
function emojiClickfunc() {
console.log("clicked...")
alert('clicked...');
}
</script>
<!-- style -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
I even created a sample example, which seems to work fine there! But for some reason, not within my own code as shown above :(
Any advice on how to rectify this issue would be greatly appreciated.
EDIT:
In my attempts to troubleshoot, I added an event listener to the window
Array.from(emojis).forEach(function (item) {
console.log("item", item);
window.addEventListener('click', emojiClickfunc);
});
I'm still struggling to resolve this. I need to determine which line in an unordered list was clicked by the user, rather than through a window event. Any ideas?