code not working for bigger range of numbers

Question

So my problem is that I wrote this code that takes two numbers and writes all numbers between those numbers (including the given two numbers). The code works for the numbers 4 and 7, it prints out "4 5 6 7" but when the 2nd number is a little bigger than the first number for example for the numbers 6 and 14 the code does nothing. If someone could explain to me why it is like this and how could I solve this problem I would-be so happy.

function calculate() {
  var start = document.getElementById("number1").value;
  var end = document.getElementById("number2").value;
  var answer = "";
  for (var i = start; i <= end; i++) {
    answer = answer + i + " ";
  }
  document.getElementById("answer2").innerHTML = answer;
}

<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="calculate()">Pokaż</button>
<div id="answer2"></div>

Alessio Cantarella · Accepted Answer · 2021-03-01 21:13:56Z

5

The value property returns a string representing the value of the value attribute of a text field.
To compare start and end you need to convert them into numbers (e.g. with the Number primitive wrapper), else the string 6 will be (alphabetically) greater than the string 14.

function calculate() {
  var start = Number(document.getElementById("number1").value);
  var end = Number(document.getElementById("number2").value);
  var answer = "";
  for (var i = start; i <= end; i++) {
    answer = answer + i + " ";
  }
  document.getElementById("answer2").innerHTML = answer;
}

<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="calculate()">Pokaż</button>
<div id="answer2"></div>

edited Mar 1, 2021 at 21:13

answered Mar 1, 2021 at 21:05

Alessio Cantarella

5,2413 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Doğuş Hamdi Over a year ago

This solved the problem but can you explain why?

Alessio Cantarella Over a year ago

@DoğuşHamdi I explained why.

Tim Lewis Over a year ago

@DoğuşHamdi The string 6 is larger than the string 14, when compared alphabetically, so your for() loop doesn't do anything. Compare: console.log('6' > '14') (true) and console.log(6 > 14) (false)

Doğuş Hamdi Over a year ago

Oh sorry didn't see it, thank you for helping :)

Evren · Accepted Answer · 2021-03-01 21:20:44Z

2

That's the alternative solution with parseInt in for

function calculate() {
  var start = document.getElementById("number1").value;
  var end = document.getElementById("number2").value;
  var answer = "";
  for (var i = parseInt(start); i <= parseInt(end); i++) {
    answer = answer + i + " ";
  }
  document.getElementById("answer2").innerHTML = answer;
}

<input type="number" id="number1">
<input type="number" id="number2">
<button onclick="calculate()">Pokaż</button>
<div id="answer2"></div>

answered Mar 1, 2021 at 21:20

Evren

4,4601 gold badge13 silver badges20 bronze badges

1 Comment

karfau Over a year ago

But why would you want to re-parse end for every value of i? I think it would make more sense to do it as part of assigning it to end. Also you should maybe mention that the input accepts hexadecimal (and potentially octal, depending on the browser/runtime) "numbers" this way, since you don't pass a second parameter: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

code not working for bigger range of numbers

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related