javascript update a setInterval with input value

Question

hey i was just wondering if someone could help me work out way my script is not working i'm trying to get it to update the speed for the setInterval using a input number box but it does not seen to update the value each time the value is change in the input and i really don't get why this is happening any ideas why?

var nametags = null;
var nametag = document.getElementById('names');
var speed = document.querySelector('input[id="speeds"]');

var partyTags = function() {
  clearInterval(nametags);
  if (nametags !== null) {
    nametags = null;
  } else {
    var delay = speed.value;
    nametags = setInterval(function() {
      document.getElementsByClassName('hud-party-tag')[0].value = '&#' +
        Math.random().toString(9).substring(9, 5) + ' ' + [nametag.value] + ' ' + '&#' +
        Math.random().toString(9).substring(9, 5);
    }, delay);
  }
}

speed.addEventListener("input", partyTags);

partyTags();

<input type="number" id="speeds" value="1000">
<input type="text" maxlength="35" id="names" value="NAME HERE">
<br>
<br>
<input type="text" class="hud-party-tag" disabled>

Seems to be working.. what is the expected output? jsfiddle.net/naho6gcL — Pavan Andhukuri
– Pavan Andhukuri, Commented Oct 4, 2018 at 4:25
convert speed variable into integer: var speed = parseInt(document.querySelector('input[id="speeds"]')); — user-9725874
– user-9725874, Commented Oct 4, 2018 at 4:51

Shidersz · Accepted Answer · 2018-10-04 05:00:53Z

The problem was on the check of nametag for NULL value, in particular when the input event was detected, the first time you call partyTags() it enters into the IF condition and set nametag to NULL, after this the method finished and the interval isn't updated. The next call to partyTags() enters the ELSE section and update the interval, and so on... So, try next code and see if it works now:

var nametags = null;
var nametag = document.getElementById('names');
var speed = document.querySelector('input[id="speeds"]');

var partyTags = function()
{
    clearInterval(nametags);
    var delay = speed.value;

    nametags = setInterval(
        function()
        {
            document.getElementsByClassName('hud-party-tag')[0].value = '&#' +
            Math.random().toString(9).substring(9, 5) + ' ' + [nametag.value] + ' ' + '&#' +
            Math.random().toString(9).substring(9, 5);
        },
        delay
    );
}

speed.addEventListener("input", partyTags);

partyTags();

<input type="number" id="speeds" value="1000">
<input type="text" maxlength="35" id="names" value="NAME HERE">
<br>
<br>
<input type="text" class="hud-party-tag" disabled>

Jabar Sadiq Syed Ibrahim · Accepted Answer · 2018-10-04 04:53:42Z

0

Remove this call in the code

partyTags();

you called partyTags method twice

answered Oct 4, 2018 at 4:53

Jabar Sadiq Syed Ibrahim

193 bronze badges

Collectives™ on Stack Overflow

javascript update a setInterval with input value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related