HTML onclick 按钮需要点击两次

Question

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

我有一个按钮，点击后会改变按钮的背景颜色和hide/show一些内容

HTML

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

JS HTML

<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>

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

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

Answer 1

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

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

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

所以下一次测试wprks。

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

x.style.display === "none"

至：

x.style.display != "block"

Answer 2

使用您提供的代码片段没有重现该问题：

<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 执行某些操作
从按钮中删除 class pro-saved-team-btn 并检查它是否改变按钮 onclick 行为

HTML onclick 按钮需要点击两次

HTML onclick button takes two clicks

html

javascript

css

jinja2

flask