我看到了类似问题的答案，但它们对我的没有帮助
我有一个按钮，当点击时，将更改按钮的背景色并隐藏/显示一些内容
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>
我知道这个功能有效，但我需要点击两次按钮才能改变背景颜色。
有人知道如何修复这个问题，让它只需点击一次就可以工作吗？
问题是，当事情开始时，没有人设置属性显示的样式。
因此，第一次测试CCD_ 1失败。
因此，代码将x.style.display设置为"none"。
所以下一次测试是wprks。
为了避免在开始时将每个样式显示设置为无，请更改
x.style.display === "none"
至：
x.style.display != "block"
问题不会在您给出的代码片段中重现：
<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的行为