All geek questions in one place

Loop in javascript [X to Y]

I am starting to learn javascript and I have the first problem. In the task, I want to execute a loop that prints numbers from a user-specified range, for example: for values: 2 and 10, prints in div: 2,3,4,5,6,7,8,9, 10. My code:

function loopChecking() { 'use strict'; var numberA = document.getElementById("numberA").value, numberB = document.getElementById("numberB").value, i = 0, result = ""; for (i = numberA; i <= numberB; i += 1) { result += i + " "; } document.getElementById("numbers").innerHTML = result; }

below is the html code:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Loop</title> <script src="numbers.js"></script> </head> <body> <input type="text" id="numberA" /> <input type="text" id="numberB" /> <input type="submit" value="Show" onclick="loopChecking()" /> <div id="numbers"></div> </body> </html>

Thanks for the help, MD.

+5
source share
5 answers

You need to convert numberA and numberB to number first

 var numberA = +document.getElementById("numberA").value, //observe unary + numberB = +document.getElementById("numberB").value, //observe unary +

Demo

 function loopChecking() { 'use strict'; var numberA = +document.getElementById("numberA").value, numberB = +document.getElementById("numberB").value, i = 0, result = ""; for (i = numberA; i <= numberB; i += 1) { result += i + " "; } document.getElementById("numbers").innerHTML = result; } 
 <input type="text" id="numberA" /> <input type="text" id="numberB" /> <input type="submit" value="Show" onclick="loopChecking()" /> <div id="numbers"></div>
+8
source

Your numberA and numberB not considered a number. You need to analyze them

 var numberA = parseInt(document.getElementById("numberA").value,10), numberB = parseInt(document.getElementById("numberB").value,10),
+2
source

First of all, you need to clean if your numbers are actually numbers.

You can also add a check for ( numberA < numberB ) or specify a loop according to numbers A and number B.

 function loopChecking() { var numberA = Number(document.getElementById("numberA").value), numberB = Number(document.getElementById("numberB").value), result = ""; if (numberA && numberB) { for (var i = numberA; i <= numberB; i++) { result += i + ' '; } } document.getElementById("numbers").innerText = result; } 
 <html> <head> <meta charset="utf-8" /> <title>Loop</title> <script src="numbers.js"></script> </head> <body> <input type="text" id="numberA" /> <input type="text" id="numberB" /> <input type="submit" value="Show" onclick="loopChecking()" /> <div id="numbers"></div> </body> </html>
+1
source

Here is a working violin.

I used parseInt() on document.getElementById("numberA").value

0
source

Other parsing answers are clearly building, as the number is correct, but in HTML5 and especially for mobile users it is better to do it. You must set the input type to number not text if you expect the user to enter only a number. And you will need to use the valueAsNumber HTMLInputElement property.

So, for example, in the HTML markup:

 <input type="number" id="numberA" />

And in javascript:

 var numberA = document.getElementById("numberA").valueAsNumber 

 function loopChecking() { 'use strict'; var numberA = document.getElementById("numberA").valueAsNumber, numberB = document.getElementById("numberB").valueAsNumber, i = 0, result = ""; for (i = numberA; i <= numberB; i += 1) { result += i + " "; } document.getElementById("numbers").innerHTML = result; } 
 <input type="number" id="numberA" /> <input type="number" id="numberB" /> <input type="submit" value="Show" onclick="loopChecking()" /> <div id="numbers"></div>

Regarding readability and user experience, this is definitely better.

0
source

Source: https://habr.com/ru/post/1273711/

More articles:


All Articles