无法使用JavaScript在用户输入下生成乘法表

Question

我有一个页面，提示用户输入从1到9的正整数，然后javascript代码将从输入值一直到9生成一个乘法表。我遇到一个错误，我无法检索值并对其进行乘法。

function timesTable()
{
    var values = document.getElementById('value1');

    var showTables = '';
    for (var i=1; i<9; i++) {
       showTables += values + " x " + i +" = "+ values*i + "\n";
    }
    var p_tables = document.getElementById('tables').innerHTML = showTables;
}

<label>Enter an integer from 1 to 9 : </label>
<input type="text" size=20 id=value1 name="value">
<button onclick="timesTable()">Generate times table</button><br> <br>
<p id="tables"></p>

预期结果：

Answer 1

您必须获取元素的值而不是元素本身

 var values = document.getElementById('value1').value;

function timesTable()
{
    var values = document.getElementById('value1').value;

    var showTables = '';
    for (var i=1; i<9; i++) {
       showTables += values + " x " + i +" = "+ values*i + "<br>";
    }
    var p_tables = document.getElementById('tables').innerHTML = showTables;
}

<label>Enter an integer from 1 to 9 : </label>
<input type="text" size=20 id=value1 name="value">
<button onclick="timesTable()">Generate times table</button><br> <br>
<p id="tables"></p>

Answer 2

您正试图乘元素本身。你真正需要的是价值。

function timesTable()
{
    var values = document.getElementById('value1').value;

    var showTables = '';
    for (var i=1; i<9; i++) {
       showTables += values + " x " + i +" = "+ values*i + "\n";
    }
    var p_tables = document.getElementById('tables').innerHTML = showTables;
}

<label>Enter an integer from 1 to 9 : </label>
<input type="text" size=20 id=value1 name="value">
<button onclick="timesTable()">Generate times table</button><br> <br>
<p id="tables"></p>

Answer 3

您试图在其中查找值的javascript行是错误的，因为它将返回整个DOM及其属性和属性。 您只需要找到它的值，然后替换行

var values = document.getElementById('value1');

使用

var values = document.getElementById('value1').value;

Answer 4

这就是您想要的。
请注意，如果用户输入了意外内容，则可能仍然会失败。您可以使用type="number"的输入来要求一个整数（至少在某些浏览器中是这样）。

  const userValue = document.getElementById("value1").value;
  const p_tables = document.getElementById("tables");
  let outputHtml = "";
  for(let i = 1; i < 10; i++){
    outputHtml += userValue + " x " + i + " = " + userValue * i + "<br/>";
  }
  p_tables.innerHTML = outputHtml;

Answer 5

您将输入字段用作文本来生成表，最好使用数字作为输入类型并获取输入字段的值，您必须使用上面代码和行中使用的值功能中断使用 <\ br> （请忽略“ \”）。

function timesTable()
{
    var values = document.getElementById('value1').value;
    var showTables = '';
    for (var i=1; i<=9; i++) {
       showTables += values + " x " + i +" = "+ values*i + "<br>";
    }
    document.getElementById('tables').innerHTML = showTables;
}

<label>Enter an integer from 1 to 9 : </label>
<input type="Number" size=20 id=value1 name="value">
<button onclick="timesTable()">Generate times table</button><br> <br>
<p id="tables"></p>