HTML按钮无法执行onclick函数问题排查求助

核心问题分析 #

• 函数名冲突：你定义的click函数和DOM元素的原生click()方法重名，导致在onclick属性中调用时，优先触发元素自身的原生方法，而非你写的全局函数。
• 表单默认提交行为：按钮嵌套在<form>标签内，即使是type="button"，仍可能触发表单默认提交动作，引发页面刷新，打断函数执行流程。

解决步骤 #

1. 重命名自定义函数 #

将click改为非原生方法名，比如handleButtonClick，彻底避免命名冲突。

2. 阻止表单默认提交 #

给<form>标签添加onsubmit="return false"，直接禁用表单的默认提交行为，防止页面刷新。

修改后的代码示例 #

HTML代码 #

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

JavaScript代码 #

function handleButtonClick(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 '⭕'
    }
}

额外优化建议 #

• 避免使用零散的全局变量（如v0至v8、rnd），可以用对象或闭包统一管理状态，减少命名污染；
• 推荐使用addEventListener绑定事件代替onclick属性，代码更易维护，例如：

  document.getElementById('but0').addEventListener('click', () => handleButtonClick(0));
  

内容的提问来源于stack exchange，提问作者Kjur0