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

Navigation
0

I have a code in java script that does the following when I click on one of the buttons if it starts a count of 60 seconds, the problem is that I have 2 buttons, the 1 button and the 2 button and when I click the 2 button it's time for button 1 to start ...

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>
    
asked by anonymous 12.06.2016 / 21:47

1 answer

4

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

What we did here was to use different IDs for all elements involved, and we are passing the respective IDs in 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 this instead of ID to detect the button pressed, but the intention was only illustrate with a basic example.


Here is 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 used this to get the button clicked, dispensing its id

  • We have two functions, so we do not get the element by ID every time

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

12.06.2016 / 22:44
Onclick with Javascript denial DNS redirection - Problem Using AWS service