So, I have a table with some rows. There is a dropdown button in each row. When I click on the dropdown it should open. This is working at the beginning and then randomly stopping. I tried hard debugging it but came to nothing. Here’s a video to give you a better idea:
Here’s the code for handling the buttons:
// Money Chooser Drop Down
const drop_btns = document.getElementsByClassName("investment-amount-drop-ic");
// console.log(drop_btns.length);
for (var i = 0; i < drop_btns.length; i++) {
drop_btns[i].addEventListener("click", function (e) {
var target_ic = e.target;
var par = this.parentElement;
// console.log((par.children[2].style.display = "block"));
par.children[2].classList.add("show");
var potential_profit_row =
par.parentElement.parentElement.children[3].children[0];
var profit_map = {
"$ 25": "44",
"$ 50": "110",
"$ 75": "137",
"$ 100": "170",
};
const dropdown = par.children[2];
const dropdown_items = dropdown.children;
// const amount_label = par
for (var i = 0; i < dropdown_items.length; i++) {
dropdown_items[i].addEventListener("click", function (e) {
par.children[0].innerText = e.target.innerText;
potential_profit_row.innerText = "$ " + profit_map[e.target.innerText];
});
}
window.addEventListener("click", function (e) {
if (e.target != target_ic && e.target != dropdown) {
par.children[2].classList.remove("show");
}
});
});
}<table>
<tbody>
<tr>
<td class="invest-action">
<div class="btn-invest-amount">
<span class="amount">$ 25</span>
<div class="investment-amount-drop-ic">
<i class="fa-solid fa-angle-down"></i>
</div>
<div class="btn-invest-list">
<div class="invest-list-item">$ 25</div>
<div class="invest-list-item">$ 50</div>
<div class="invest-list-item">$ 75</div>
<div class="invest-list-item">$ 100</div>
</div>
</div>
<button class="invest-now-btn">Trade Now</button>
</td>
</tr>
</tbody>
</table>Check the jsFiddle
If you can’t find an exact solution any ideas about why this is happening will be much appreciated.