Question

我想打印一个用户输入数字的乘法表。但是没有任何事情发生在点击但是这是什么错误？还是我早点进入这个项目？

<body>
<p>Multiplication table</p>
<input placeholder="Enter the number" type="text" name="number" id="quest"/>
<br />
<button onclick="multFunction()">Process</button>
<br />

<p id="multiply"></p>

<script>
    function multFunction() {
        var a = document.getElementsById("quest").value;
        var i = 1;
        for (i = 1 ; i < 11 ; i++) {
            var c = parseInt(a) * parseInt(i);
            document.getElementById("multiply").innerHTML = a + "x" + i + "=" + c;
        }

    }
</script>

Answer 1

您的代码中存在一些错误：

var a = document.getElementsById("quest").value;

应该是：

var a = document.getElementById("quest").value;
//                         ^ No "s" there.

接下来，您不希望每次都替换innerHTML，而是要为其添加新行。但是，写innerHTML通常不是一个好主意。（每次写入都会导致浏览器重新解析DOM）替换：

document.getElementById("multiply").innerHTML = a + "x" + i + "=" + c;

使用：

result += a + " x " + i + " = " + c + '</br>';

在功能的前面添加result = '';。然后，在循环之后，将result写入innerHTML

这是一个有效的演示：

function multFunction() {
    var a = document.getElementById("quest").value;
    var i = 1;
    var result = '';
    for (i = 1 ; i < 11 ; i++) {
        var c = parseInt(a) * parseInt(i);
        result += a + " x " + i + " = " + c + '</br>';
    }
    document.getElementById("multiply").innerHTML = result;
}

<p>Multiplication table</p>
<input placeholder="Enter the number" type="text" name="number" id="quest"/>
<br />
<button onclick="multFunction()">Enter the number</button>
<br />

<p id="multiply"></p>

Answer 2

将getElementsById修复到multFunction()的第一行，它应该是

的getElementById

使用浏览器控制台或Firebug之类的插件可以让您更轻松地捕获此类错误

打印乘法表

2 个答案: