創建具有最小和最大輸入的乘法表-有解無憂

我有一個使用嵌套回圈創建乘法表的程式。用戶輸入需要一個大于 2 的數字輸入和一個小于 12 的乘數。以下代碼已經產生了所需輸出的一部分，只是該代碼不遵循最小和最大輸入規則。

代碼中是否有錯誤輸入？謝謝。

代碼：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      
      p{
        color: #27186b;
      }
    </style>
    <script>
      function addNumbers() {
    
    var multiplier;
        if (multiplier > 12)
        {
            alert("Multiplier above maximum of 12");
    }
    
    var number;
        if (number < 2)
        {
            alert("Number below minimum of 2");
    }
    
        var result = "";

    number = Number(document.getElementById("number").value);
    multiplier = Number(document.getElementById("multiplier").value);        
        
        
        for(var i = number; i <= multiplier; i  ){
          result = result   "<p>"  number   "*"   i   "="   number * i "</p>";
        }

        document.getElementById("result").innerHTML = result;
      }
    </script>
  </head>
  <body>
    </br>
    Enter the number : <input id="number" />
    Enter the multiplier : <input id="multiplier" />
    <br>    
    </br>
    <button onclick="addNumbers()">Print Multiplication table</button> 
    <div id="result">

  </body>
</html>

uj5u.com熱心網友回復：

只需在條件之前分配變數。

var number = Number(document.getElementById("number").value);

var multiplier = Number(document.getElementById("multiplier").value);

uj5u.com熱心網友回復：

第一：您的 JS 代碼中沒有嵌套回圈，只有一個回圈。嵌套回圈由兩個或多個回圈組成，一個在另一個內部，例如兩個“for”回圈，你有一個外回圈和一個內回圈，形成一個嵌套回圈。

第二：你有一些邏輯問題，讓我們澄清一下：

如果您只期望數字，那么您的輸入只需為數字，請使用 tag: type="number"。
您的結果 div '<div></div>' 沒有結束標簽
對于<br>，你不需要關閉這個標簽，這個標簽是一個空元素，你可以只是'<br>'或最佳實踐'<br/>'，但它是一個換行符，只有在某些情況下case 需要一個結束標記（使用 XHTML）。看到這個

第三：根據您的要求，您可以在輸入中添加管理最小值和最大值(min="1" max="5")的邏輯，但在您的函式中，您需要驗證這些值是否符合您的規則。

if (number < multiplier) doStuff; else alert('error message');

function addNumbers() {
  var multiplier;
  var number;
  number = Number(document.getElementById("number").value);
  multiplier = Number(document.getElementById("multiplier").value);
  if (multiplier > 12) {
    alert("Multiplier above maximum of 12");
    return;
  }
  if (number < 2) {
    alert("Number below minimum of 2");
    return;
  }
  var result = "";
  for (var i = number; i <= multiplier; i  ) {
    result = result   "<p>"   number   "*"   i   "="   number * i   "</p>";
  }
  document.getElementById("result").innerHTML = result;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         p{
         color: #27186b;
         }
      </style>
   </head>
   <body>
      <br>
      Enter the number : <input id="number" type="number" min="2" max="12" />
      Enter the multiplier : <input id="multiplier" type="number" min="2" max="12" />
      <br>    
      <button onclick="addNumbers()">Print Multiplication table</button> 
      <div id="result"></div>
   </body>
</html>

uj5u.com熱心網友回復：

將所有內容包裝在 a 中，<form>因為您使用了多個表單控制元件。有很多優點沒有缺點，相信。
使用一個<table>完美的元素（無需解釋顯而易見的）。
行內事件處理程式是垃圾，所以不要使用它們：

~~<button onclick='lame(this)'>~~

在事件屬性上使用：
```
document.forms.ID.onsubmit = handleSubmit;
```
或者使用事件監聽器：
```
document.forms.ID.addEventListener('submit', handleSubmit);
```
click這個例子沒有使用事件，submit而是使用s獨有的事件<form>。submit是在非常特殊的情況下觸發的，在這個例子中，a里面<button>的 a<form>就是觸發器。會發生某些事情：
1. 如果<form>設定為驗證資料，它會在submit事件期間這樣做。
2. 資料被發送到服務器。
3. 它將處理服務器回應，如果沒有服務器或不成功（~~200~~），則頁面變為空白，用戶體驗不佳。
該示例至少為4.1設定：
```
<input id='A' type='number' min='2' max='12' value='2' required>
<input id='B' type='number' min='2' max='12' value='2' required>
```
該required屬性將在以下情況下向用戶發送警告：
- 表單控制元件沒有資料。
- 如果用戶輸入的資料不在引數范圍內。在示例中，如果用戶輸入小于 2 或大于 12 的任何內容，則submit事件發生時將發出警告。
我們必須防止4.2發生，因為我們不需要服務器并且我們想避免4.3。只需使用以下內容：
```
event.preventDefault()
```
如果您繼續學習 JavaScript ，那么熟悉事件非常重要。

用于創建 a 的常用演算法<table>是兩個回圈：

//outer loop generates a row/<tr>
for (let r=2; r < rows; r  ) {
  //inner loop generates all of the cells/<td> for the row
  for (let c=2; c < cols; c  ) {
  //once the the inner loop is finished the next row is started

const form = document.forms.mTable;
const table = document.querySelector('table');

form.onsubmit = createTable;

function createTable(e) {
  e.preventDefault();
  const rows =  this.A.value   1;
  const cols =  this.B.value   1;
  const tB = table.tBodies[0];
  tB.replaceChildren();

  for (r = 2; r < rows; r  ) {
    let row = tB.insertRow();
    for (c = 2; c < cols; c  ) {
      let col = row.insertCell();
      let cell = c < 10 ? `${r} 
      <br>&thinsp;X<br>&nbsp; 
       ${c}` :
        `${r}<br>&nbsp;X<br>
     &thinsp; ${c}`;
      col.innerHTML = cell;
    }
  }
}

html {
  font: 300 3vmax/1 Consolas
}

legend {
  font-size: 1.25rem
}

input,
button {
  display: inline-block;
  width: 3rem;
  font: inherit;
  text-align: center;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  margin-top: 8px;
}

table,
td {
  border: 1px solid black;
}

<form id='mTable'>
  <fieldset>
    <legend>Create Multiplication Table</legend>
    <input id='A' type='number' min='2' max='12' value='2' required>
    <input id='B' type='number' min='2' max='12' value='2' required>
    <button>GO</button>
    <table>
      <tbody></tbody>
    </table>
  </fieldset>
</form>

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

標籤：javascript html

上一篇：npm相關ID和uuid之間的區別？

下一篇：'Home'已定義但從未使用no-unused-vars".*