使用输入框变量的简单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循环中使用整数，默认情况下使用字符串，因此需要首先对其进行解析。
第一个问题：'5'<'10'这是错误的。
第二个问题：“ 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>