CODEWITHSUNDEEP
javascript
Benny Thadikaran
Benny Thadikaran

Reputation: 1201

Printing multiplication tables as per form input - Not printing result

I am trying to calculate and print the result of multiplication tables.

The form accepts the Number and the start and end range for multiplication.

The result should print in the format "12 x 1 = 12" and so on

Everything is working except the last line to print the result of the calculation in the 'content' div.

The result just flashes for a second. No errors

HTML

<form name="multiply">
    <p>Enter the number: <input type="number" id="myNum"></p>
    <p>From: <input type="number" id="sValue"> To: <input type="number" id="eValue"></p>
    <input type="submit" name="Calculate" onclick="timesTable()">
</form>

<div id="content"></div>

Javascript

        function timesTable() {
        Num = document.getElementById("myNum").value;
        startValue = document.getElementById("sValue").value;
        endValue = document.getElementById("eValue").value;
        var result = [];

        for (var i = startValue; i <= endValue; i++) {

            result[i] = Num * i;

            document.getElementById("content").innerHTML = Num + " x " + i + " = " + result[i] + "<br>";
        }
        }

Upvotes: 0

Views: 69

Answers (2)

Mahi
Mahi

Reputation: 1727

you need to insert into DOM after for loop.

function timesTable() {
  total="";
        Num = document.getElementById("myNum").value;
        startValue = document.getElementById("sValue").value;
        endValue = document.getElementById("eValue").value;
        var result = [];

        for (var i = startValue; i <= endValue; i++) {

            result[i] = Num * i;

             total=total+" "+ Num + " x " + i + " = " + result[i] + "<br>";
        }
  document.getElementById("content").innerHTML=total;
        }
<form name="multiply" onsubmit="return false;">
    <p>Enter the number: <input type="number" id="myNum"></p>
    <p>From: <input type="number" id="sValue"> To: <input type="number" id="eValue"></p>
    <input type="submit" name="Calculate" onclick="timesTable()">
</form>

<div id="content"></div>

Upvotes: 2

Geeky
Geeky

Reputation: 7496

It is typical closure problem. It is displaying the last entered value.

change your code to the following

function timesTable() {
  Num = document.getElementById("myNum").value;
  startValue = document.getElementById("sValue").value;
  endValue = document.getElementById("eValue").value;
  var result = [];
  var content = document.getElementById("content");
  var res=[];
  for (var i = startValue; i <= endValue; i++) {

    result[i] = Num * i;
    res.push( (function(i) {

      return Num + " x " + i + " = " + result[i] + "<br>"
    })(i));

  }
  content.innerHTML = res;
}
<form name="multiply">
  <p>Enter the number:
    <input type="number" id="myNum">
  </p>
  <p>From:
    <input type="number" id="sValue">To:
    <input type="number" id="eValue">
  </p>
  <input type="submit" name="Calculate" onclick="timesTable()">
</form>

<div id="content"></div>

Hope this helps

Upvotes: 1

Related Questions