协助使用循环

Question

基本上，我正在尝试创建一个函数，它接受参数、所需的时间表以及它应该开始和结束的值。作用是返回一个可以在输出区域显示的格式化字符串。 其余代码将从文本框中获取三个值并调用乘法表函数。 返回值将显示在文本区域中。 它应该是什么样子的一个例子：

我的 JS 目前是这样的：

function btnDisplay_onclick()
{
    // get textboxes and assign to variables
    var tableTextbox = document.getElementById("txtTable");
    var startTextbox = document.getElementById("txtStart");
    var finishTextbox = document.getElementById("txtFinish");
    var outputTextbox = document.getElementById("txtOutput");

    var table = tableTextbox.value;
    var start = startTextbox.value;
    var finish = finishTextbox.value;

    var output = multiply(table, start, finish);

    outputTextbox.value = output;

}

function multiply(table, start, finish)
{
    for

}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- saved from url=(0014)about:internet -->
    <title>Multiplication Table</title>
    <script src="Lab6-MultTable.js"></script>
</head>

<body>
    <form action=#>
        <p><h1>Multiplication Table</h1></p>
        <p>
            Table Number:<input type="text" id="txtTable"><br>
            Start Number:<input type="text" id="txtStart"><br>
            Finish Number:<input type="text" id="txtFinish"><br>
        </p>
        <p>
            <textarea id="txtOutput" rows="8" cols="20" readonly="readonly"></textarea>
        </p>
        <p>
            <input type="button" value="Display Numbers" id="btnDisplay" onclick="btnDisplay_onclick()">
            <input type="reset">
        </p>
    </form>
    <noscript>This website requires JavaScript to be enabled.</noscript>
</body>
</html>

所以基本上我很难学习如何正确使用循环，如果有人愿意向我解释它作为阅读它我无法完全理解它，无论出于何种原因。

Answer 1

你可以稍微改变值的处理方式，比如

var table = +tableTextbox.value || 0;

这会将值转换为数字并检查真实值。如果为假，则取零作为值。

对于乘法，获取 for 循环的开始值和结束值以及结果的变量。

计算值并将行添加到结果中，返回结果。

function multiply(table, start, finish) {
    var i, result = '';
    for (i = start; i <= finish; i++) {
        result += table + ' * ' + i + ' = ' + table * i + '\n';
    }
    return result;
}

function btnDisplay_onclick()  {
    // get textboxes and assign to variables
    var tableTextbox = document.getElementById("txtTable");
    var startTextbox = document.getElementById("txtStart");
    var finishTextbox = document.getElementById("txtFinish");
    var outputTextbox = document.getElementById("txtOutput");

    var table = +tableTextbox.value || 0;   // convert to number and
    var start = +startTextbox.value || 0;   // testfor truthynes or take 
    var finish = +finishTextbox.value || 0; // the default value of 0

    var output = multiply(table, start, finish);

    outputTextbox.value = output;

}

function multiply(table, start, finish) {
    var i, result = '';
    for (i = start; i <= finish; i++) {
        result += table + ' * ' + i + ' = ' + table * i + '\n';
    }
    return result;
}

    <form action="">
        <p><h1>Multiplication Table</h1></p>
        <p>
            Table Number:<input type="text" id="txtTable"><br>
            Start Number:<input type="text" id="txtStart"><br>
            Finish Number:<input type="text" id="txtFinish"><br>
        </p>
        <p>
            <textarea id="txtOutput" rows="8" cols="20" readonly="readonly"></textarea>
        </p>
        <p>
            <input type="button" value="Display Numbers" id="btnDisplay" onclick="btnDisplay_onclick()">
            <input type="reset">
        </p>
    </form>

Answer 2

另一种方法是将结果写入循环内textarea。

$("#display").on("click", function(){
   multiply();         
});                

function multiply(){
  var table = document.getElementById("table").value
    , start = document.getElementById("start").value
    , finish = document.getElementById("finish").value
    , text = document.getElementById("result");
  text.value = '';
  for ( var i = start ; i <= finish ; i++ ){
      text.value +=  table + " * " + i + " = " + (table * i) + "\n";
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <div id="parameters">
    Table number: <input id="table" type="number" />
    <br/>
    Start number: <input id="start" type"number" />
    <br/>
    Finish number: <input id="finish" type"number" />
  <div>
  
  <textarea id="result" rows="8" cols="20" readonly="readonly"></textarea>
  </text>
  <br/><br/>
    
  <button id="display" /> Display numbers
  <button type="reset" /> Reset
</form>