HTML onclick 按钮需要两次点击答案

【问题标题】：HTML onclick button takes two clicksHTML onclick 按钮需要两次点击
【发布时间】：2022-01-21 02:02:05
【问题描述】：

我看到了类似问题的答案，但它们对我没有帮助

我有一个按钮，点击后会改变按钮的背景颜色并隐藏/显示一些内容

HTML

<button class="pro-saved-team-btn" id="{{ teams[loop.index0] | replace(' ', '') + 'button' }}"
                            onclick="show_team('{{ team | replace(' ', '') }}', '{{ team | replace(' ', '') + 'button' }}')">
                        {{ team.title() }}
</button>

HTML 中的 JS

<script>
        function show_team(team, team_btn) {
            x = document.getElementById(team);
            btn = document.getElementById(team_btn);
            if (x.style.display === "none") {
                x.style.display = "block";
                btn.style.backgroundColor = '#1DA1F2';
            } else {
                x.style.display = "none";
                btn.style.backgroundColor = '#161616';
            }
        }
    </script>

我知道该功能有效，但我需要单击按钮两次才能更改背景颜色。

有人知道如何解决这个问题，只需单击一下就可以工作吗？

【问题讨论】：

标签： javascript html css flask jinja2

【解决方案1】：

您给出的代码 sn-p 无法重现该问题：

<html>
<html>
<head>
</head>
<body>
<div id="teamId"> hee hee hee </div>
<button  id="buttonId" onclick="show_team('teamId','buttonId')">
 click
</button>
<script>
        function show_team(team, team_btn) {
            x = document.getElementById(team);
            btn = document.getElementById(team_btn);
            if (x.style.display === "none") {
                x.style.display = "block";
                btn.style.backgroundColor = '#1DA1F2';
            } else {
                x.style.display = "none";
                btn.style.backgroundColor = '#161616';
            }
        }
    </script>
</body>
</html>

您可以执行以下操作：

将日志 (console.log('clicked')) 添加到您的函数中，这样您就可以确保按钮接收到您所做的每一次点击 - 如果某些点击从未到达按钮，请调查拦截来源
查看您的代码中是否还有其他地方可以使用这些按钮和团队 ID 进行操作
从按钮中删除类pro-saved-team-btn并检查它是否改变按钮onclick的行为

【讨论】：

【解决方案2】：

问题是启动时没有人设置属性显示的样式。

因此第一轮测试x.style.display === "none" 失败。

然后代码将 x.style.display 设置为 'none'。

所以下一次测试wprks。

为了避免在开始更改时必须将每个样式显示设置为无

x.style.display === "none"

到：

x.style.display != "block"

【讨论】：