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 : &alefsym; " + (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?

you can see that i have tried disabling it via the attribute setting but i forgot that divs dont really have this function how can i do it — Cornelius Labuschagne
– Cornelius Labuschagne, Commented Jul 14, 2017 at 11:05

Erazihel · Accepted Answer · 2017-07-14 11:11:13Z

3

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>

edited Jul 14, 2017 at 11:11

answered Jul 14, 2017 at 11:06

Erazihel

7,6456 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cornelius Labuschagne Over a year ago

looks like im going to have make due with the button then thanks bud i just thought it will be possible

Collectives™ on Stack Overflow

Resetting Timer in Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related