基于用户输入的 JavaScript 乘法表

Question

我有一个程序，用户输入两个输入，然后当按下显示按钮时，会显示这两个数字参数内的乘法表。但是，当我按下按钮时，什么也没有显示。

    <span style = "font-size:15px">First Number: </span><input type = "text" id = "first_num" style = "font-size:18px"> <br /><br />
    <span style = "font-size:15px">Second Number: </span><input type = "text" id = "second_num" style = "font-size:18px"> <br /><br />
    <button type = "button" onclick = "display()">Display</button> <br /><br />
    <script type = "text/javascript">
    var f_num = document.getElementById("first_num").value;
    var s_num = document.getElementById("second_num").value;
    function display() {
    for (i=1;i<f_num + 1;i++) {
            for (j=1;j<s_num + 1;j++) {
            if (j == 10) {
            document.write(i+"*" +j +"=" +(i*j) + "<br /><br />")
            } else {
            document.write(i+"*" +j +"=" +(i*j) + "  |  ")
            }
            }
    } 
    }
    </script>

Answer 1

您应该在函数中设置变量。在当前代码中，它们是在第一次执行脚本时设置的，此时它们具有空白值。

正确的代码是。

 function display() {
  var f_num = parseInt(document.getElementById("first_num").value);
  var s_num = parseInt(document.getElementById("second_num").value);
 for (i=1;i<f_num + 1;i++) {
        for (j=1;j<s_num + 1;j++) {
        if (j == 10) {
        document.write(i+"*" +j +"=" +(i*j) + "<br /><br />");
        } else {
        document.write(i+"*" +j +"=" +(i*j) + "  |  ");
        }
        }
} 
}

您可以在下面的插件上检查内容。

https://plnkr.co/edit/kgWaEG1ZvgST0RclvV2l?p=preview