Resetting Timer in Javascript

Question

So My game is almost done with its alpha devlopment then im going to launch it.

Just on issue though. I created button using div element. This button(div) is only supposed to to be clicked once and then be disabled.

Is it possible to disable this button(div) element that i made?

Here is my code

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>
					

so as you can see my buttons is pretty but it is clickable many times

how can make a play able to only click it once?

Answer 1

You can't disable a div. You have to switch it to a button (that's what it is).

Then you can use:

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

You can also style your button based on the disabled attribute:

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

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

.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;
}

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