create multiplication table that looks like a simple table with inputs

Question

I am trying to make a program in which can print a multiplication table (a typical one, like the ones found in notebooks in table order). This table uses inputs in which it defines the perimeter of each axis (number defines length of x axis, multiplier defines y-axis). However, it does not print.

Is there a typo in the code? Thanks.

Code:

function addNumbers() {
  var k;
  var l;
  for (i = 1; i < l; i++) {
    document.write("<tr>");
    for (j = 1; j < k; j++) {
      document.write("<td>" + j * i + "</td>");
    }
    document.write("</tr>");
  }
}

Enter the number : <input id="k" type="number" min="3" /> Enter the multiplier : <input id="l" type="number" max="11" />
<br>
<br>
<button onclick="addNumbers()">Print Multiplication table</button>

You try to create a table without a table tag... and you try to use `l` for block `for loop` but is empty. — Simone Rossaini, May 16 '22 at 07:39
Variables k and l are undefined, that is they have no value at the time of click. Solve this and you will get result. — Nizamuddin Shaikh, May 16 '22 at 07:54

score 2 · Answer 1 · answered May 16 '22 at 07:53

Do you want something like this?

There are a lot of issues in your code, I corrected as far as I understood.

function addNumbers() {
  const k = document.getElementById("k").value;
  const l = document.getElementById("l").value;

  let html = `<table><tr><th>Number</th><th>Multiplier</th><th>Result</th></tr>`;

  for (j = 1; j <= l; j++) {
    html += `<tr><td>${k}</td>`;
    html += `<td>${j}</td><td>${k*j}</td>`;
    html += `</tr>`;
  }
  html += `</table>`;

  document.getElementById("output").innerHTML = html;
}

Enter the number : <input id="k" type="number" min="3" />
<br /> Enter the multiplier : <input id="l" type="number" max="11" />
<br>
<br>
<button onclick="addNumbers()">Print Multiplication table</button>

<div id="output"></div>

Yes, the original code has many problems, but this is a good direct answer (+1). It might help OP to explain why this way is better than using document.write. — Yogi, May 16 '22 at 08:00

score 2 · Accepted Answer · answered May 16 '22 at 07:58

There are several things wrong in your code.

document.write is a pretty bad way to manipulate your DOM unless you want to do very specific things. You want to use stuff like createElement and appendChild to be more explicit in what you are doing for both readability and maintainability.
You reference var k, var l in your code and you assume they will take the value of the inputs with id k and l respectively automatically. This does not happen and you need to specify where the value comes from.
"Print" is probably not the right way to call what you want to do. In HTML/JS, when people say "print", they probably mean console.log. What you are trying to do is to modify the HTML. (This isn't something wrong, but just a thing that will help others understand what you want to do better)

function addNumbers() {
  const k = Number(document.getElementById('k').value);
  const l = Number(document.getElementById('l').value);

  const table = document.createElement('table');
  for (i = 1; i <= l; i++) {
    const row = document.createElement('tr');
    for (j = 1; j <= k; j++) {
      const cell = document.createElement('td');
      cell.innerHTML = i * j;
      row.appendChild(cell);
    }
    table.appendChild(row);
  }
  document.getElementById('tableTarget').appendChild(table);
}

Enter the number : <input id="k" type="number" min="3" /> Enter the multiplier : <input id="l" type="number" max="11" />
<br />
<br />
<button onclick="addNumbers()">Print Multiplication table</button>
<div id="tableTarget"></div>

score 0 · Answer 3 · answered May 16 '22 at 07:56

Try this one.

function addNumbers() {
var k_ = document.getElementById('k').value;
var l_ =  document.getElementById('l').value;

for(let i = 1; i <= l_; i++) {
    const result = i * k_;
    console.log(`${k_} * ${i} = ${result}`);
}


}

Enter the number : <input id="k" type="number" min="3" />
Enter the range : <input id="l" type="number" max="11" />
<br>
<br>
<button onclick="addNumbers()">Print Multiplication table</button>

create multiplication table that looks like a simple table with inputs

3 Answers3