在Javascript

Question

所以我的游戏几乎完成了它的alpha开发，然后即将启动它。

但问题就在于此。我使用div元素创建了按钮。这个按钮（div）只能被点击一次然后被禁用。

是否可以禁用我创建的按钮（div）元素？

这是我的代码

function speedOne(){
	if (incomeDisplay >= boosterCostOne){
		
		document.getElementById("incomeDisplay").innerHTML = "Arrings : ℵ " + (incomeDisplay = incomeDisplay - boosterCostOne);
    
		document.getElementById("speedOne").setAttribute("disabled", "disabled");
		
	booster = 2;
		
	}
}

.speed-boosters {
	background-color: royalblue;
	width:170px;
	margin-top: 2%;
	margin-left: 2%;
	margin-bottom: 2%;
	padding:15px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 
		1px 2px 5px black,
		-1px 2px 5px black;
	border-radius: 5px;
}

.speed-boosters:hover{
	background-color: deepskyblue;
		box-shadow: 
		1px 2px 10px black,
		-1px 2px 10px black;
}

.speed-boosters:active{
	box-shadow: inset 0px 0px 15px 2px black;
	border-radius: 5px;
}

<div class = "speed-boosters" id="speedOne" onclick="speedOne()">Speed Booster - 1</div>
					<p>Buy Speed Booster - 1 : Boost Income speeds by 10%</p>
					

因为你可以看到我的按钮很漂亮，但它可以多次点击

如何才能让游戏只能点击一次？

Answer 1

您无法停用div。您必须将其切换为button（即它是什么）。

然后你可以使用：

document.getElementById("speedOne").setAttribute("disabled", "disabled");

您还可以根据disabled属性设置按钮的样式：

.speed-boosters:disabled {
    background-color: red;
}

＆＃13;

＆＃13;

function speedOne(){
  console.log('foo');
  document.getElementById("speedOne").setAttribute("disabled", "disabled");
}

＆＃13;

.speed-boosters {
	background-color: royalblue;
	width:170px;
	margin-top: 2%;
	margin-left: 2%;
	margin-bottom: 2%;
	padding:15px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 
		1px 2px 5px black,
		-1px 2px 5px black;
	border-radius: 5px;
}

.speed-boosters:hover{
	background-color: deepskyblue;
		box-shadow: 
		1px 2px 10px black,
		-1px 2px 10px black;
}

.speed-boosters:active{
	box-shadow: inset 0px 0px 15px 2px black;
	border-radius: 5px;
}

.speed-boosters:disabled {
	background-color: red;
}

＆＃13;

<button class = "speed-boosters" id="speedOne" onclick="speedOne()">Speed Booster - 1</button>
<p>Buy Speed Booster - 1 : Boost Income speeds by 10%</p>

＆＃13;

＆＃13;

＆＃13;