Mibby Mibby - 1 month ago 9
Javascript Question

Assistance with using loops

Basically I'm trying to create a function in which it takes parameters, the times table required, and the values at which it should start and end. The function is to return a formatted string that can be displayed in the output area.
The rest of the code will get the three values from the textboxes and call the multiplication table function.
The return value will be displayed in a text area.
An example of what it should look like:

Example output

My JS currently looks like this:

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

}


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


So basically I'm having trouble learning how to use Loops properly if someone would be willing to explain it to me as reading up on it I'm not able to fully understand it for whatever reason.

Answer

You could change the processing of the value a bit, like

var table = +tableTextbox.value || 0;

That converts the value to number and checks for a truthy value. If falsey, take zero as value.

For multiplication take the start and end value for the for loop and a variable for the result.

Calculate the value and add the line to the result, return the result.

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>

Comments