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;

将值转换为数字并检查truthy值。如果是假的，则将零值作为值。

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

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

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

＆＃13;

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;
}

＆＃13;

    <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>

＆＃13;

Answer 2

另一种方法是将结果写在textarea的循环中。

＆＃13;

$("#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";
  }
}

＆＃13;

<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>

＆＃13;

协助使用循环

2 个答案: