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"  id="but0" onclick="click(0)">
    <input type="button"  id="but1" onclick="click(1)">
    <input type="button"  id="but2" onclick="click(2)">
    <input type="button"  id="but3" onclick="click(3)">
    <input type="button"  id="but4" onclick="click(4)">
    <input type="button"  id="but5" onclick="click(5)">
    <input type="button"  id="but6" onclick="click(6)">     
    <input type="button"  id="but7" onclick="click(7)">
    <input type="button"  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 '⭕'
    }
}

CodePudding user response：

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

CodePudding user response：

Try using onClick with capital 'C'.