When I click the button more than 1 time the count accelerates

Asked

Viewed 207 times

0

People I got from a friend here on the forum a one button script with countdown, that when clicking starts the count. I really appreciate it because it is very good... there is only one problem, when I click more than once on the button the countdown accelerates, see the code

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

Could you help me solve this problem?

  • The this in dispara is not the button (as the other function waits), and that is what is causing the problem.

  • I need this, this serves to grab the button clicked, dispensing your ID

1 answer

1


Well, I solved it like this. I know it’s not the best way possible, but it’s a hiccup. As the colleague said, he’s not getting the boot with this. Then I put the id of the button, it is passed to the function, and that id of the button I put the same name of the counter class, so what it passes to the function is the id of the button and tbm the counter class, so I can find the 2. Look:

    <script language="JavaScript">
  function dispara( span ) {
    conta( span, document.getElementsByClassName( span )[0]);
  }

  function conta( botao, contador ) {

    document.getElementById(botao).disabled=true;
    if(contador.innerHTML==0) {
      contador.innerHTML = 10;
      document.getElementById(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')" id="s1" class="btn">
<span class="s1">10</span>
<br/><br/>
<input type="button" value="botao2" onclick="dispara('s2')" id="s2" class="btn">
<span class="s2">10</span>

I hope I’ve helped!!!

  • Great! Just takes away a doubt, I can in place of S1 put the name that is in value, not need to put S1, s2, S3. I want to put it like this: <input type="button" value="botao1" onclick="dispara('botao1')" id="botao1" class="btn">&#xA;<span class="botao1">10</span>&#xA;<input type="button" value="botao2" onclick="dispara('botao2')" id="botao2" class="btn">&#xA;<span class="botao2">10</span>

  • 1

    Yes, just remember to put the same id as the boot in the counter class...

  • So thanks a friend!

  • I have another question. when it ends back to 10 because in counter.innerHTML ta in 10, but I wanted to know if there is how to make the 2 button go back to 20 without having to put another script again? It is because it will have more than 1 button and the button 1 will be 10 seconds, the button 2 will be 20 and so follows... It’s like I aim the counter.innerHTML at the value that will be in span?

  • 1

    just change the value within the span to 20, if I understand your doubt

  • 1

    Hold on, I think I understand now I’m gonna try here

  • Okay, thank you so much for helping me out!

  • To simplify, after reaching 0 the count goes back to the value defined in counter.innerHTML. And as there will be more than one button with different values I wanted the count to vote for their respective values 1 will be 10 seconds so it goes back to 10, button 2 will be 20 seconds so it goes back to 20

  • 1

    I waited here but I got hehe, tried several ways to avoid repeating code, with array did not work so, I added an extra attribute in the counter: <input type="button" value="botao1" onclick="dispara('s1')" id="s1" class="btn">&#xA;<span class="s1" value="5">5</span> Ai instead of when it zeroes it receives direct the 10, it receives : counter.innerHTML = counter.getattribute("value");

  • 1

    There it goes back to the number that is in value...

  • You’re just the guy! You have no idea how much you’ve helped me, I’m so grateful to you, man! You’ve saved me a lot of trouble!

  • 1

    Thanks :) Glad I could help you

Show 7 more comments

Browser other questions tagged

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