CODEWITHSUNDEEP
javascripthtmlloops
Michael
Michael

Reputation: 51

For loop with user input javascript

So basically I have a for loop and I am trying to get it to run x amount of times. Depending on what the user inputs. The issue I am having is how to get the user input and also make sure that its a number not any other type of input. making them try again if its wrong.

Upvotes: 0

Views: 18841

Answers (6)

Efe Omoregie Elijah
Efe Omoregie Elijah

Reputation: 488

It's simple really

Input Number : <input id="numberinput" onkeypress="return event.charCode >= 48 && event.charCode <= 57" />

<button id="btn" onclick="doAction()">
Send
</button>

<script>
var doAction = function () {
    var input = document.getElementById('numberinput');
    var times = parseint(input.value);

    for(var i = 0; i < times; i++) {
      //do whatever you need to do
    }
}
</script>

Upvotes: 2

AmN
AmN

Reputation: 331

HTML:

<input type="text" name="somefield" id="someid" value="10" />

JS:

var userInput = document.getElementById('someid').value;
if( Number.isInteger(parseInt(userInput)) )
{ 
    // do something 
}

Also, Number.isInteger() does not work on Internet explorer 11 or earlier.

Upvotes: 1

Shadi Shaaban
Shadi Shaaban

Reputation: 1720

Here is an example using user input dialog:

var input, parsedInput = 0;

do {
  input = prompt("Please enter valid number", "1");  
    parsedInput = parseInt(input);

} while(isNaN(parsedInput) || parsedInput < 0); 
 // keep trying on invalid input or negative number

for( i=0; i< parsedInput ; i++){
  console.log("loop " + i);
}

Upvotes: 1

Moishe Lipsker
Moishe Lipsker

Reputation: 3034

To get the value from the input, you can use the value property of the input element.

To make sure the input is a number, you can specify type="number" if HTML5 is supported as mentioned in Angelos Chalaris's answer.

document.getElementById('btn').onclick = function(){
    var totalIterations = parseInt(document.getElementById('input').value);
    var output = document.getElementById('output');
    output.innerHTML = '';
    for(var i = 1; i <= totalIterations; i ++) {
        var item = document.createElement('div');
        item.innerHTML = i;
        output.appendChild(item);
    }
};
<input id="input" type="number"/>
<input id="btn" type="button" value="Do loop"/>
<div id="output"></div>

Upvotes: 1

Arif
Arif

Reputation: 1643

Fiddle

HTML

<input type="number" id="myInput">
<button id="myButton">Run Loop</button>

Javascript

$('body').on('click', '#myButton', function() {
  var input = $('#myInput').val();
  for(var i = 0; i < input; i++) {
  alert('You have written inside input field: ' + input + ". This is Alert #" + (i+1))
  }
});

Upvotes: 1

Angelos Chalaris
Angelos Chalaris

Reputation: 6747

In HTML5 you can use <input type="number"> to restrict an input to numeric characters only.

For older browsers, that are not HTML5-compatible, use <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>. This utilizes Javascript to make sure that only numeric input is accepted into the input box.

Check out the snippet below for both solutions in action: 

Javascript-based:<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>
<br><br>
HTML5 solution (preferred):<input type="number">

Upvotes: 2

Related Questions