为什么点击按钮后初始隐藏的table表格无法正常显示？

核心问题原因 #

你的代码有2个直接导致点击按钮没反应的问题：

• 脚本执行时机错误：绑定按钮事件的JS代码写在<head>区域，代码运行时<body>内的#okBtn元素还没有被浏览器渲染，document.getElementById("okBtn")会返回null，后续的事件绑定逻辑直接报错失效，点击按钮自然不会触发显示表格的逻辑。
• （次要规范问题）页面中存在重复idinputGroupSelect，不符合HTML id唯一的规范，后续如果要获取两个下拉框的取值会出现异常，建议修改为不同的id，比如appSelect、decisionSelect。

修复方案 #

方案1：调整脚本位置 #

直接把你的JS代码整体移到</body>闭合标签的前面，保证DOM元素全部加载完成后再执行元素获取和事件绑定逻辑，修改后代码结构如下：

<!-- 原有<body>内的所有内容不变，在闭合body前插入JS代码 -->
        <div class="container mt-4" id="resultTable">
            <table class="table table-bordered">
                <!-- 表格内容不变 -->
            </table>
        </div>
        <script>
            function loadTable(){
                // TODO
            }

            function showTable(){
                document.getElementById('resultTable').style.display="block";
            }

            var btn = document.getElementById("okBtn");
            btn.addEventListener("click",loadTable);
            btn.addEventListener("click",showTable);
        </script>
    </body>
</html>

方案2：添加DOM加载完成监听 #

如果需要保留JS在<head>的位置，可以把事件绑定逻辑包裹在DOMContentLoaded事件回调中，等DOM全部渲染完成后再执行绑定：

<head>
    <!-- 原有head内的内容不变 -->
    <script>
        function loadTable(){
            // TODO
        }

        function showTable(){
            document.getElementById('resultTable').style.display="block";
        }
        // 监听DOM加载完成事件
        document.addEventListener('DOMContentLoaded', function() {
            var btn = document.getElementById("okBtn");
            btn.addEventListener("click",loadTable);
            btn.addEventListener("click",showTable);
        })
    </script>
</head>

两种方案任选一种都可以解决点击按钮不显示表格的问题。

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