0

Gente eu tenho um codigo em java script, que faz o seguinte quado clico num dos botões se inicia uma contagem de 60 segundos, o problema é que tenho 2 botões, o botão 1 e o botão 2 e quando clico no botão 2 é tempo do botão 1 que se inicia...

Veja o código abaixo, se possível me diga o que posso fazer.

<script language="JavaScript">
	var contador = 60;
							 
	function conta() {
	document.getElementById("inicia").disabled=true;
	if(contador==0) {
	document.getElementById("inicia").disabled=false;
	return false;
	}
							 
	contador = contador-1;
	setTimeout("conta()", 1000);
	document.getElementById("valor").innerHTML = contador;
	}
</script>

<input type="button" id="inicia" value="botao1" onclick="conta()" class="btn"><span id="valor">60</span><br/><br/>

<input type="button" id="inicia" value="botao2" onclick="conta()" class="btn"><span id="valor">60</span>

0

1 Resposta 1

4

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.

1
  • Obrigado por essa boa explicação simplificada!
    – MarsS
    Commented 12/06/2016 às 20:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .