回圈功能讓用戶決定在輸入欄位中顯示多少個數字-有解無憂

每當我來到這里時，我總是會得到一些可靠的幫助和指點，所以我會在腦子里還在琢磨這件事的時候試一試，也許明天會在這方面做更多的作業。

無論如何，我正在嘗試創建一個功能：顯示用戶輸入的數字。你想輸出多少個數字？1 在其下方的輸入欄位。

我已經讓它從 0-100 開始計數，但這不是它應該做的，我在這里錯過了什么？

function changeText() {
  var number = document.getElementById('numbersBox').value;
  var result = '';

  for (let i = 0; i < 100; i  ) {
    result  = '<br>'   i;
  }

  document.getElementById('message').innerHTML = result;
}

function clearText() {
  document.getElementById('message').innerHTML = '<br>';
  document.getElementById('numbersBox').value = '';
}

body {
      background-color: #292A2B;
      text-align: center;
      font-family: Montserrat;
      color: #fff;
    }
    
    a {
      color: rgb(27, 157, 218);
    }
    
    #main {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    #header {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    button {
      color: #fff !important;
      text-transform: uppercase;
      text-decoration: none;
      background: #eea825;
      padding: 15px;
      border-radius: 5px;
      display: inline-block;
      border: none;
      transition: all 0.4s ease 0s;
      margin-left: 5em;
      margin-right: 5em;
      box-shadow: inset 0;
    }
    
    button:hover {
      background: #434343;
      letter-spacing: 1px;
      -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
      transition: all 0.4s ease 0s;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loop Example</title>
  </head>

<body>
  <div id="main">
    <div id="header">
      <h1>Loop Example</h1>
    </div>
    <label for="Form1">
    <form id="myForm">
      <p>This program will display the numbers up to the number entered by the user.</p><br> 
      <p>How many numbers do you want to output?</p><br><br>
      <input type="text" id="numbersBox">
    </form></label>

    <p id="demo">Output:</p><br>
    <p id="message"> <br> </p>

    <button type="button" onClick="changeText()">Submit</button>
    <button type="button" onClick="clearText()">Clear</button>
  </div>
</body>

如果有人能在正確的方向上幫助我，非常感謝。否則，祝大家節日快樂！

uj5u.com熱心網友回復：

您只是忘記將 i 與數字進行比較。

function changeText() {
  var number = document.getElementById('numbersBox').value;
  var result = '';

  for (let i = 0; i < number; i  ) {
    result  = '<br>'   i;
  }

  document.getElementById('message').innerHTML = result;
}

function clearText() {
  document.getElementById('message').innerHTML = '<br>';
  document.getElementById('numbersBox').value = '';
}

body {
      background-color: #292A2B;
      text-align: center;
      font-family: Montserrat;
      color: #fff;
    }
    
    a {
      color: rgb(27, 157, 218);
    }
    
    #main {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    #header {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    button {
      color: #fff !important;
      text-transform: uppercase;
      text-decoration: none;
      background: #eea825;
      padding: 15px;
      border-radius: 5px;
      display: inline-block;
      border: none;
      transition: all 0.4s ease 0s;
      margin-left: 5em;
      margin-right: 5em;
      box-shadow: inset 0;
    }
    
    button:hover {
      background: #434343;
      letter-spacing: 1px;
      -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
      transition: all 0.4s ease 0s;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loop Example</title>
  </head>

<body>
  <div id="main">
    <div id="header">
      <h1>Loop Example</h1>
    </div>
    <label for="Form1">
    <form id="myForm">
      <p>This program will display the numbers up to the number entered by the user.</p><br> 
      <p>How many numbers do you want to output?</p><br><br>
      <input type="text" id="numbersBox">
    </form></label>

    <p id="demo">Output:</p><br>
    <p id="message"> <br> </p>

    <button type="button" onClick="changeText()">Submit</button>
    <button type="button" onClick="clearText()">Clear</button>
  </div>
</body>

uj5u.com熱心網友回復：

我已經編輯了您的片段，您應該將數字作為 for 回圈的結束條件傳遞

function changeText() {
    var number = parseInt(document.getElementById("numbersBox").value,10);
    var result = "";

    for (let i = 0; i < number; i  ) {
      result  = "<br>"   i;
    }

    document.getElementById("message").innerHTML = (result)
  }

  function clearText() {
    document.getElementById("message").innerHTML = ("<br>");
    document.getElementById("numbersBox").value = "";
  }

body {
      background-color: #292A2B;
      text-align: center;
      font-family: Montserrat;
      color: #fff;
    }
    
    a {
      color: rgb(27, 157, 218);
    }
    
    #main {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    #header {
      border-radius: 3px;
      padding: 10px;
      text-align: center;
    }
    
    button {
      color: #fff !important;
      text-transform: uppercase;
      text-decoration: none;
      background: #eea825;
      padding: 15px;
      border-radius: 5px;
      display: inline-block;
      border: none;
      transition: all 0.4s ease 0s;
      margin-left: 5em;
      margin-right: 5em;
      box-shadow: inset 0;
    }
    
    button:hover {
      background: #434343;
      letter-spacing: 1px;
      -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
      box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
      transition: all 0.4s ease 0s;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loop Example</title>
  </head>

<body>
  <div id="main">
    <div id="header">
      <h1>Loop Example</h1>
    </div>
    <label for="Form1">
    <form id="myForm">
      <p>This program will display the numbers up to the number entered by the user.</p><br> 
      <p>How many numbers do you want to output?</p><br><br>
      <input type="text" id="numbersBox">
    </form></label>

    <p id="demo">Output:</p><br>
    <p id="message"> <br> </p>

    <button type="button" onClick="changeText()">Submit</button>
    <button type="button" onClick="clearText()">Clear</button>
  </div>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/366114.html

標籤：javascript 循环

上一篇：為什么賦值在lambda函式中不起作用

下一篇：如何為子反應組件設定css樣式？