functions interlaced with click

Asked

Viewed 60 times

-2

I am having the following problem when I give two clicks on my button it intertwines the previous sliced array I tried to kill the previous process with . remove() and also null the counter but remove the whole element or give an error the right one was just delete the previous counter to start a new one

  <body style="background-color: #444; color: #fff;">
  
  <script>

      var vidas = 0

      function lol() {

        

         if(vidas >= 5) {
          window.location.href = 'index.html'
        } else {

          vidas++

          balao = document.getElementById('balao')


          var textos = new Array()
          textos[1] = ' texto um'
          textos[2] = ' texto dois'
          textos[3] = ' texto três'
          textos[4] = ' texto quatro'
          textos[5] = ' texto cinco'

          negativo = document.getElementById('negativo')
          negativo_2 = document.getElementById('negativo_2')
          negativo.innerHTML = '- ' + vidas

          if(vidas === 5){
            negativo.remove()
            negativo_2.style.fontSize = '20px'
            negativo_2.innerHTML = '<span align="center"><h1><b>GAME</b><h2><b>OVER</b></h2><span>'

          }

          var corazon = document.getElementById('v' + vidas)
          corazon.remove()

          var flower_ = document.getElementById('flower')


          var contador = textos[vidas].split("");
          var timer;
          

          function loop () {
            if (contador.length > 0) {
              balao.innerHTML += contador.shift();
            } else {
              clearTimeout(timer);
                }
            loopTimer = setTimeout(loop,100);

          }

          loop();

        }
        
      }
  </script>


<span>* </span><span id="balao">texto zero </span>


      <div class="objects">

          <div class="vidas">
            <span id="negativo"></span><span id="negativo_2"></span><br>
            <img id="v1" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v2" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v3" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v4" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v5" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />
          </div>

<div class="mt_2">
    <a style="cursor: pointer;" class="btn-go-home" onclick="lol()" data-tilt>Continue</a></div>
    
</body>

javascript
  • 2

    Poxa amigo. There is no way to put in your question, points, commas, for a better understanding? And explain better the problem.

  • run the file and double click on continue vc vera button and text one and two will be printed together

  • I’ll try to add a disable button according to my second function so it won’t be clicked again... but I really wanted to resolve this will that I come across this again in the future

  • 1

    Create a variable to control whether the loop you are still writing, and only process the next message if you are not: https://jsfiddle.net/b42d3c0a/

  • I had done with setimeout if lives were greater than 2 more that’s much better Valew<3 if you can answer the question here in answer I mark as answer

  • it would be good to change the name of the admin post to one that best fits the parameters of my request to help other people.

Show 1 more comment

1 answer

1

the comment that worked was from user @hkotsubo

Create a variable to control whether the loop is still typing, and only process the next message if it is not: jsfiddle.net/b42d3c0a

var vidas = 0;
var processar = true;
function lol() {
    if (!processar)
        return;

    processar = false;
    if (vidas >= 5) {
        window.location.href = 'index.html';
    } else {
        vidas++;
        balao = document.getElementById('balao');

        var textos = new Array();
        textos[1] = ' texto um';
        textos[2] = ' texto dois';
        textos[3] = ' texto três';
        textos[4] = ' texto quatro';
        textos[5] = ' texto cinco';

        negativo = document.getElementById('negativo');
        negativo_2 = document.getElementById('negativo_2');
        negativo.innerHTML = '- ' + vidas;

        if (vidas === 5) {
            negativo.remove();
            negativo_2.style.fontSize = '20px';
            negativo_2.innerHTML = '<span align="center"><h1><b>GAME</b><h2><b>OVER</b></h2><span>';
        }

        var corazon = document.getElementById('v' + vidas);
        corazon.remove();

        var flower_ = document.getElementById('flower');

        var contador = textos[vidas].split("");
        function loop() {
            if (contador.length > 0) {
                balao.innerHTML += contador.shift();
                setTimeout(loop, 100);
            } else {
                processar = true;
            }
        }
        
        balao.innerHTML = ''

        loop();
    }
}
<body style="background-color: #444; color: #fff;">
<span>* </span><span id="balao">texto zero </span>
      <div class="objects">
          <div class="vidas">
            <span id="negativo"></span><span id="negativo_2"></span><br>
            <img id="v1" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v2" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v3" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v4" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v5" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />
          </div>

<div class="mt_2">
    <a style="cursor: pointer;" class="btn-go-home" onclick="lol()" data-tilt>Continue</a></div>
</body>

Browser other questions tagged javascript

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