Button eventlistener not executing while in Mobile (Works in PC)

Question

After my object is constructed and its value is displayed in an HTML <.li.> A btn is created in another function and returned to be appended to the same <.li.>

The button works fine in desktop but when i swap over to mobile it is very strange.

Sometimes it works, sometimes it doesn't.

You sometime can't even press the join button (creates object) and you cannot tap on the x button that deletes it.

But here's the thing, if you scroll around, fidget around a bit and click the buttons again. There's a chance it will work.

I've tried changing the eventlistener in multiple ways but with no luck.

I've added console.logs into for every step about what it does so it will be easy to see what I am trying to do when you go through the process with console on the side.

Below is the button creation function

function prepCancelForm(list, i) {

    const cList = document.getElementById("getCancelList");
    const cIndex = document.getElementById("getIndex");
    cList.value = list;
    cIndex.value = i;

    cancelForm.style.display = "";
}

function createBtn(index, listNum) { // creates button
    const btn = document.createElement("button");
    btn.setAttribute("index", index);
    btn.setAttribute("list", listNum);

    btn.addEventListener("pointerdown", (event) => {
        prepCancelForm(btn.getAttribute("list"), btn.getAttribute("index"));
    });

    const bNode = document.createTextNode("X");
    btn.appendChild(bNode);
    return btn;
}

For a bigger insight

Here is the live demo - https://lucasynl.github.io/rbc/pages/game.html

Here is the git repo - https://github.com/LucasYNL/rbc

I've been at this problem for 2 days now and it's driving me nuts. If all this crap will be gone if I just go learn jQuery, let me know.

Answer 1

Ok, so I decided that I didn't need sleep untill I figured this out. To the point where I started redoing my ENTIRE js files.

Turns out, the code have 0 problems. It's because my stupid @ss decided to leave the forms (which takes up 80% of mobile screen) dead @ss in the center and anything that is overlapping it is unclick-able.

So yeah, to solve my own problem, MOVE THE DAMN FORMS.