Простой цикл Javascript с использованием переменной поля ввода

Question

Я просто пытаюсь начать с JavaScript и собрал этот маленький цикл. При условии, что я положил 1 в поле запуска .. он работает нормально. Если я поставлю что-нибудь еще, хотя сам цикл никогда не произойдет.

В соответствии с консолью все мои переменные должны соответствовать критериям для активации цикла, поэтому я не вижу проблемы

function myFunction() {
  console.clear();
  var Start = document.getElementById("Start").value
  console.log("Start=", Start)
  var End = document.getElementById("End").value
  console.log("End=", End)
  var which_one = document.getElementById("which_one").value
  console.log("which_one=", which_one)
  var i = Start;
  console.log("i=", i);

  var Counter_Array = "";
  console.log("Counter Array =", Counter_Array);
  var Counter_Array_Split = "";
  console.log("Counter Array Split = ", Counter_Array_Split)
  var Show_Me = "";
  console.log("Show Me = ", Show_Me)
  console.log("------Loop Starts------")
  for (; Start < End; Start++) {

    console.log("Start=", Start)

    console.log("i looped=", Start);
    Counter_Array += "," + Start
    var Counter_Array_Split = Counter_Array.split(',');

    console.log("CounterArrayLog=", Counter_Array);
    console.log("Counter Array Split = ", Counter_Array_Split);
    // sets all  elements with the id demo to have the value of the newURL variable
    document.getElementById("array").innerHTML = Counter_Array_Split;




  }
  console.log("------Loop Ends------")

  var Show_Me = Counter_Array_Split[which_one]
  console.log("Show Me = ", Show_Me)
  document.getElementById("my_val").innerHTML = Show_Me;

}

.My_Form {
  display: block;
  background-color: orange;
  ;
  border: 1;
  width: 500px;
  border-style: solid;
  border-radius: 5px;
}

.my_div {
  display: block;
  background-color: lightblue;
  ;
  border: 1;
  width: 500px;
  border-style: solid;
  border-radius: 5px;
}

<h2>Example Javascript Loop</h2>
<div class="My_Form">
  Start @:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="Start" id="Start" value="2"><br> End @:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="fname" id="End" value="10"> <br> Show
  me the <input type="text" name="fname" id="which_one" value="5">th value in the array <br>
</div>
<br>
<div class="my_div">
  The array built was
  <p id="array"></p>
  The Value picked was
  <p id="my_val"></p>
</div><br>
<button onclick="myFunction()">
Click Me
</button>
<br>

Answer 1

Вам нужно использовать целые числа в цикле for, по умолчанию вы используете строку, поэтому вам нужно сначала проанализировать ее.
1-я проблема: «5» <«10», это неверно. <br> 2-я проблема: «5» ++ преобразует его в 5 и только после этого будет увеличиваться.

function myFunction() {
  console.clear();
  var Start = parseInt( document.getElementById("Start").value, 10)
  console.log("Start=", Start)
  var End = parseInt(document.getElementById("End").value, 10)
  console.log("End=", End)
  var which_one = document.getElementById("which_one").value
  console.log("which_one=", which_one)
  var i = Start;
  console.log("i=", i);

  var Counter_Array = "";
  console.log("Counter Array =", Counter_Array);
  var Counter_Array_Split = "";
  console.log("Counter Array Split = ", Counter_Array_Split)
  var Show_Me = "";
  console.log("Show Me = ", Show_Me)
  console.log("------Loop Starts------")
  for (; Start < End; Start++) {

    console.log("Start=", Start)

    console.log("i looped=", Start);
    Counter_Array += "," + Start
    var Counter_Array_Split = Counter_Array.split(',');

    console.log("CounterArrayLog=", Counter_Array);
    console.log("Counter Array Split = ", Counter_Array_Split);
    // sets all  elements with the id demo to have the value of the newURL variable
    document.getElementById("array").innerHTML = Counter_Array_Split;




  }
  console.log("------Loop Ends------")

  var Show_Me = Counter_Array_Split[which_one]
  console.log("Show Me = ", Show_Me)
  document.getElementById("my_val").innerHTML = Show_Me;

}

.My_Form {
  display: block;
  background-color: orange;
  ;
  border: 1;
  width: 500px;
  border-style: solid;
  border-radius: 5px;
}

.my_div {
  display: block;
  background-color: lightblue;
  ;
  border: 1;
  width: 500px;
  border-style: solid;
  border-radius: 5px;
}

<h2>Example Javascript Loop</h2>
<div class="My_Form">
  Start @:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="Start" id="Start" value="2"><br> End @:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="fname" id="End" value="10"> <br> Show
  me the <input type="text" name="fname" id="which_one" value="5">th value in the array <br>
</div>
<br>
<div class="my_div">
  The array built was
  <p id="array"></p>
  The Value picked was
  <p id="my_val"></p>
</div><br>
<button onclick="myFunction()">
Click Me
</button>
<br>