javascript - 根据表单输入打印乘法表 - 不打印结果

Question

我正在尝试计算并打印乘法表的结果。

该表单接受数字以及乘法的开始和结束范围。

结果应以“12 x 1 = 12”格式打印，依此类推

除了最后一行在“内容”div 中打印计算结果之外，一切正常。

结果只会闪烁一秒钟。没有错误

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>";
        }
        }

Answer 1

你需要在for循环后插入到DOM中。

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>