javascript - 协助使用循环

标签 javascript loops for-loop

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

Example output

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

所以基本上我在学习如何正确使用 Loops 时遇到了麻烦,如果有人愿意向我解释它,因为无论出于何种原因我都无法完全理解它。

最佳答案

你可以稍微改变一下值的处理方式,比如

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>

关于javascript - 协助使用循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39935796/

相关文章:

c# - 如何使用 C# 编写 LINQ 查询以从另一个对象获取对象?

java - 如果对象等于用户输入,则从 Arraylist 中删除对象,否则仅打印一次

java - 在java中编写一个连续的 'for'循环

javascript - 如何使用 jQuery 在最后一步 (D) 自定义向导中制作单线动画?

javascript - 如何限制移动网站的滚动但允许访问可能缩回的地址栏

javascript - 更改时弹出 slider 的值

java - 为什么这个 for 循环 wordcount 方法在 java 中不起作用

javascript - 充当 votable javascript 投票按钮

Python:for循环在列表理解上的性能

arrays - 用于将文件名放入数组中的快速迭代 webfolder