When I click on button 2 is the time of button 1 that starts!

Asked

Viewed 89 times

0

People I have a code in java script, which makes the following when I click on one of the buttons starts a count of 60 seconds, the problem is that I have 2 buttons, the button 1 and the button 2 and when I click on the button 2 is time of the button 1 that starts...

See the code below, if possible tell me what I can do.

<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>

javascript

1 answer

4


There are a thousand ways to solve what you want, the following is just an example.

What we have done here is to use different Ids for all the elements involved, and we are passing the respective Ids on each 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>

There are ways to optimize much more, for example by calling a function and using a second function as a counter, and even using the this instead of ID to detect the button pressed, but the intention was only to illustrate with a basic example.


Here, a different version, to show some things:

<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>

  • We use the this to grab the button clicked, dispensing your ID

  • We have two functions, not to look for the element by ID every time

  • We are using anonymous function on setTimeout, so that we can take advantage of the objects already solved by the previous function.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.