Help using loops

Question

Help using loops

Basically, I am trying to create a function in which it takes parameters, the required time table and the values with which it should begin 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 three values from the text fields and will call the multiplication table function. The return value will be displayed in the text area. An example of what it should look like:

Currently, my JS is as follows:

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>

So basically I have problems learning how to use Loops properly if someone wants to explain this to me as reading on it. I cannot fully understand it for any reason.

+4

javascript loops for-loop

Bowie 08 . '16 18:22

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>

Hide result

0

Lucas Costa 08 . '16 18:54

Nina Scholz · Accepted Answer · 2016-10-08T18:39:59+0000

,

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>

Hide result

Help using loops

More articles: