gpt4 book ai didi

html - 单击后如何修复将 css 更改为按钮

转载 作者:行者123 更新时间:2023-11-28 00:27:54 26 4
gpt4 key购买 nike

我正在尝试制作一个代码,使按钮会改变颜色,并且在单击一次后将无法再次单击。该代码完成了所有这些工作,只是它更改了我希望它在您仅单击一个按钮时影响的所有三个按钮。

var clicks = 0;

function onClick(event) {
event.className = "button visited";
if (clicks >= 2) {
alert("WRONG! YOU LOSE! TRY AGAIN!");
window.location.href = 'index.html';
}
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
.button {
font-family: "Arial", sans-serif;
background-color: transparent;
border: 10px dashed white;
color: white;
font-size: 30px;
text-align: center;
line-height: 0;
cursor: pointer;
border-radius: 8px;
height: 200px;
width: 400px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}

.visited {
background-image: none;
background-color: red;
font-size: 35px;
border: 10px dashed black;
color: black;
cursor: not-allowed;
}

.button:hover {
background-image: none;
background-color: white;
font-size: 35px;
border: 10px dashed black;
color: black;
}
<button id="button1" class="button" type="button" onclick="onClick(this)">Button1</button>

<button id="button2" class="button" type="button" onclick="onClick(this)">Button2</button>

<button id="button3" class="button" type="button" onclick="onClick(this)">Button3</button>

我希望能够单击其中一个按钮,并且只有该按钮会改变颜色并且无法被单击,而不是在单击一个按钮时更改所有按钮。

最佳答案

为了使按钮不可点击,您只需将其禁用即可。因此,您需要按此处所示传递元素的 ID。

<button id="button1" class="button" type="button" onclick="onClick(this.id)">Button1</button>
<button id="button2" class="button" type="button" onclick="onClick(this.id)">Button2</button>
<button id="button3" class="button" type="button" onclick="onClick(this.id)">Button3</button>

然后您只需使用按钮上的 .disabled 函数定义方法即可。

function disableButton(id){
document.getElementById(id).disabled = true;
}

关于html - 单击后如何修复将 css 更改为按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54546679/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com