How to Change window.setInterval(function(){ value from textbox and submit button

user_14755809 0
Viewed 162

i Have a small script that need to change window.setInterval(function(){ value }, 1000); from text box and button.

i tried this code that is working, if i change rrrr id value from HTML code then its working, but not working from changing text box value after HTML render.

i need to change this value from text box and submit button.

My Try is :

var delay = document.getElementById("rrrr").value;
window.setInterval(function(){
$( "#button-next" ).click();
}, delay);
<input type="text" id="rrrr" value="1000" style="width:50">
<button id="rrrr">submit</button>

any suggestion so i should change ?

html jquery javascript
2 Answers

Is this what your want ? With this schema, you could change time interval as you want, by changing the text input and clicking on [submit] button.

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var iHandle = 0;
$(document).ready(function() {
    //
    // read initial value:
    //
    var delay = document.getElementById("rrrr").value;
    //
    // set initial interval:
    //
    iHandle = window.setInterval(function() {
       // console.log(delay);
        $("#button-next" ).click();
    }, delay);
    //
    // change delay by user trigger (pressing on button):
    //
    $("#rrrrbutton").on("click", function () {
        //
        // clear previous setInterval() object if existent:
        //
        if(iHandle) {
          clearInterval(iHandle);           
        }
        //
        // read new value:
        //
        var delay = document.getElementById("rrrr").value;
        //
        // set new interval:
        //
        iHandle = window.setInterval(function() {
          console.log(delay);
          $("#button-next" ).click();
        }, delay);
    });
});
</script>
</head>
<body>
<input type="text" id="rrrr" value="1000" style="width:50">
<button id="rrrrbutton">submit</button>

</body>
</html>

The console.log() is only here for debugging:

console.log(delay);

As we see some common code, we can abbreviate the programming, by defining a public user function runInterval():

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var iHandle = 0;

function runInterval() {
    //
    // clear previous setInterval() object if existent:
    //
    if(iHandle) {
      clearInterval(iHandle);           
    }
    //
    // read new value:
    //
    var delay = document.getElementById("rrrr").value;
    //
    // set new interval:
    //
    iHandle = window.setInterval(function() {
      console.log(delay);
      $("#button-next" ).click();
    }, delay);
    //
    return true;
}
//
// do this job after page loading:
//    
$(document).ready(function() {
  //
  // do initial interval:
  //
  runInterval();
  
  //
  // change delay by user trigger (pressing on button):
  //
  $("#rrrrbutton").on("click", function () {
     //
     // relaunch setInterval() by reading new interval value:
     //
     return runInterval();
  });
});
</script>
</head>
<body>
<input type="text" id="rrrr" value="1000" style="width:50">
<button id="rrrrbutton">submit</button>

  ......

</body>
</html>
user_9530970

The type of your input value is string when setInterval function expects number so you may want to try changing type="text" to type="number" or try changing the type in assignment:

var delay = Number(document.getElementById("rrrr").value);

or in the function itself:

window.setInterval(function(){
$( "#button-next" ).click();
}, Number(delay));
user_150673430
Related