简体   繁体   中英

how can i take an input with a textbox1 // use a for loop to count till 50 // and output it in textbox2

i got a textbox id="t1" that takes one input lets say the input is: 20

i use a nother textbox id="t2" for the output which shoold look like this: 21 22 23 24 25 ... 49 50 1 2 3 4 5 ... max lenght of the "numbers" = 50 with a break after every number i did the following code::

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
  function add()
  {
    var a = document.getElementById("t1").value;
    for(i = a; i<51; i++) {
      a+=i +"<br>";
  }
  document.getElementsByName("t4")[0].value= a;
}
</script>
</head>

<body>
  <input class="t1" type="number" id="t1">
  <button onclick="add()">Add</button>
  <br><br>
  <input style="height: 500px;" class="t2" type="textbox" name="t4"></input>
</body>
</html>

which rly don't work like I want, what am I doing wrong here?

Try to change the second textbox to 'textarea' and use '\\n' instead of <br/ >

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
  function add()
  {
    var a = document.getElementById("t1").value;
    for(i = a; i<51; i++) {
      a += i + "\n";
  }
  document.getElementsByName("t4")[0].value = a;
}
</script>
</head>

<body>
  <input class="t1" type="number" id="t1">
  <button onclick="add()">Add</button>
  <br><br>
  <textarea style="height: 500px;" class="t2" type="textbox" name="t4"></textarea>
</body>
</html>

There is no <input type="textbox"> , use <textarea> tag for multyline textbox.
If you need 50 numbers, you have to iterate 50 times.
And you need some logic to start over when number reaches 50.

Run the snippet below:

 function add() { var v = +document.getElementById("t1").value; var a = [v * (v < 50) + 1]; for (var i = 0; i < 49; i++) a.push(a[i] + 1 - 50 * (a[i] > 49)); document.getElementsByName("t4")[0].value = a.join('\\n'); } 
 <input class="t1" type="number" id="t1" value="50"> <button onclick="add()">Add</button> <br><br> <textarea style="height: 200px;" class="t2" name="t4"></textarea> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM