Buttons in HTML not executing onclick function

Question

After creating buttons they don't react while clicking on them like if the function specified in onclick attribute weren't defined or attribute didn't exist at all

I've tried:

1. Manually testing functions in console
2. Using different browsers (I've tested: Edge, Chrome, Brave, Firefox, Opera, Tor)
3. Defining the function in other way
4. Using <button> instead of <input type="button>"

I expect the function to properly execute after each button press and therefore a change in button.value

What I got:

1. Function works, so its the button that doesn't execute it
2. It isn't problem with compatibility/browser
3. Function is defined correctly, no matter how it is defined it works fine in console
4. Button for some reason refreshed all page instead of executing function

<form id="game" style="display:none;">
    <input type="button" class="but" id="but0" onclick="click(0)">
    <input type="button" class="but" id="but1" onclick="click(1)">
    <input type="button" class="but" id="but2" onclick="click(2)">
    <input type="button" class="but" id="but3" onclick="click(3)">
    <input type="button" class="but" id="but4" onclick="click(4)">
    <input type="button" class="but" id="but5" onclick="click(5)">
    <input type="button" class="but" id="but6" onclick="click(6)">     
    <input type="button" class="but" id="but7" onclick="click(7)">
    <input type="button" class="but" id="but8" onclick="click(8)">
</form>

function click(but) {
    switch (but) {
        case 0:
            if (v0 != undefined) { return v0 }
            v0 = rnd;
            document.getElementById(`but0`).value = rnd;
            break;
        case 1:
            if (v1 != undefined) { return v1 }
            v1 = rnd;
            document.getElementById(`but1`).value = rnd;
            break;
        case 2:
            if (v2 != undefined) { return v2 }
            v2 = rnd;
            document.getElementById(`but2`).value = rnd;
            break;
        case 3:
            if (v3 != undefined) { return v3 }
            v3 = rnd;
            document.getElementById(`but3`).value = rnd;
            break;
        case 4:
            if (v4 != undefined) { return v4 }
            v4 = rnd;
            document.getElementById(`but4`).value = rnd;
            break;
        case 5:
            if (v5 != undefined) { return v5 }
            v5 = rnd;
            document.getElementById(`but5`).value = rnd;
            break;
        case 6:
            if (v6 != undefined) { return v6 }
            v6 = rnd;
            document.getElementById(`but6`).value = rnd;
            break;
        case 7:
            if (v7 != undefined) { return v7 }
            v7 = rnd;
            document.getElementById(`but7`).value = rnd;
            break;
        case 8:
            if (v8 != undefined) { return v8 }
            v8 = rnd;
            document.getElementById(`but8`).value = rnd;
            break;
    }
    update()
    if (rnd == '❌') {
        rnd = '⭕'
        return '❌'
    }
    else {
        rnd = '❌'
        return '⭕'
    }
}

Answer 1

The answer is a bit silly, but the reason why your buttons do nothing is because click is reserved in the context of the element. Try it, set onclick="console.log(click)", and you'll see that it shows a function with native code. To fix your problem, rename your function click to something else, like myClick and the collision disappears.

edit:

to see what function 'click' is really calling, it's this one