Tem mil maneiras de se resolver o que você quer, esse a seguir é só um exemplo.
O que fizemos aqui foi usar IDs diferentes para todos os elementos envolvidos, e estamos passando os IDs respectivos em cada onClick
:
<script language="JavaScript">
function conta(b,s) {
botao = document.getElementById(b);
contador = document.getElementById(s);
botao.disabled=true;
if(contador.innerHTML==0) {
botao.disabled=false;
contador.innerHTML = 10;
return false;
}
contador.innerHTML = contador.innerHTML - 1;
setTimeout('conta("'+b+'","'+s+'")', 1000);
}
</script>
<input type="button" id="b1" value="botao1" onclick="conta('b1','s1')" class="btn">
<span id="s1">10</span>
<br/><br/>
<input type="button" id="b2" value="botao2" onclick="conta('b2','s2')" class="btn">
<span id="s2">10</span>
Tem maneiras de se otimizar bem mais, por exemplo, fazendo a chamada para uma função e usando uma segunda função como contador, e até usando o this
em vez de ID para detectar o botão pressionado, mas a intenção foi apenas ilustrar com um exemplo básico.
Aqui, uma versão diferente, para mostrar algumas coisas:
<script language="JavaScript">
function dispara( span ) {
conta( this, document.getElementById( span ) );
}
function conta( botao, contador ) {
botao.disabled=true;
if(contador.innerHTML==0) {
contador.innerHTML = 10;
botao.disabled=false;
return false;
}
contador.innerHTML = contador.innerHTML - 1;
setTimeout( function(){conta( botao, contador )}, 1000 );
}
</script>
<input type="button" value="botao1" onclick="dispara('s1')" class="btn">
<span id="s1">10</span>
<br/><br/>
<input type="button" value="botao2" onclick="dispara('s2')" class="btn">
<span id="s2">10</span>
Usamos o this
para pegar o botão clicado, dispensando seu ID
Temos duas funções, para não ficar buscando o elemento por ID toda vez
Estamos usando função anônima no setTimeout
, para podermos aproveitar os objetos já resolvidos pela função anterior.