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:

Manually testing functions in console
Using different browsers (I've tested: Edge, Chrome, Brave, Firefox, Opera, Tor)
Defining the function in other way
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:

Function works, so its the button that doesn't execute it
It isn't problem with compatibility/browser
Function is defined correctly, no matter how it is defined it works fine in console
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 '⭕'
    }
}

Please don't link to your code as links can die over time, making your question here useless. Please edit your question to include the RELEVANT code right here. — Scott Marcus, Jan 05 '23 at 20:32
*Button for some reason refreshed all page instead of executing function* <-- Probably because you didn't specify a `type="button"` for the ` — Scott Marcus, Jan 05 '23 at 20:33
I feel like 95% of the time, questions of this ilk arise because users either don't know or don't care how to open the JavaScript debugger — ControlAltDel, Jan 05 '23 at 20:37
FYI - the function works, you can tell by changing to logic to do a console.log on click. The issue exists with how you are trying to set the value of the input boxes. — Marc Pfister, Jan 05 '23 at 20:44
i think onClick should be capital C...and maybe need to pass the function instead of the string — 1ak31sha, Jan 05 '23 at 20:50

score 1 · Accepted Answer · answered Jan 05 '23 at 21:00

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

answered Jan 05 '23 at 21:00

Dr Ocelot

48
7

what is it that you are trying to do? – DCR Jan 05 '23 at 21:15
1

Thank you. After so much time the answer was so easy – Kjur0 Jan 05 '23 at 21:17
@DCR im sorry, i dont understand. im just explaining why the buttons do nothing. `click` is different in the context of an html element and would override any outside definitions – Dr Ocelot Jan 05 '23 at 21:18
Of course the best way is to [not use inline HTML event attributes in the first place](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991) as they are outdated relics of the days before we had standards. – Scott Marcus Jan 05 '23 at 22:00

score -2 · Answer 2 · answered Jan 05 '23 at 20:46

-2

Try using onClick with capital 'C'.

answered Jan 05 '23 at 20:46

Uvejs Gjelaj

3
4

This should have been a comment. – Marc Pfister Jan 05 '23 at 20:48
It won't work, cause it it `onclick`. I double checked that in documentation – Kjur0 Jan 05 '23 at 20:49
@Kjur0 HTML is not case-sensitive. You can capitalize `onclick` any way you want. Whatever "documentation" you looked at is inaccurate. – Scott Marcus Jan 05 '23 at 21:58
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 06 '23 at 03:16

Buttons in HTML not executing onclick function

2 Answers2