javascript – 协助使用循环

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

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

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

解决方法

您可以稍微更改值的处理,例如

var table = +tableTextBox.value || 0;

将值转换为数字并检查truthy值.如果是假的,则取零作为值.

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

计算值并将结果添加到结果中,返回结果.

function multiply(table,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,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>

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...