Is it possible to store a value as id from EventListener? I need an ID from this list when I click on item.
This is what I've tried:
<ul class="list">
<li class="item-list" id="1"></li>
<li class="item-list" id="2"></li>
<li class="item-list" id="3"></li>
</ul>
<script type="text/javascript">
list.addEventListener("click", function (e) {
let podlistIndex;
if (e.target.classList.contains("item-list")) {
podlistIndex= e.target.getAttribute("id");
}
console.log(podlistIndex);
});
</script>
When the item is clicked, I can get value as an id, but the value is lost when I click somewhere else. How can I store the value?
Place the variable outside the event handler
let podlistIndex;
list.addEventListener("click", (e) => {
if (e.target.classList.contains("item-list")) {
podlistIndex = e.target.getAttribute("id");
}
console.log(podlistIndex);
});
Make an array outside the function and fill it up every single click you make. This way it won't overwrite any id.
<script>
const ids = [];
let list = document.querySelector('.list');
list.addEventListener("click", function (e) {
let podlistIndex;
if (e.target.classList.contains("item-list")) {
podlistIndex= e.target.getAttribute("id");
ids.push(podlistIndex);
}
console.log(ids);
});
</script>