基于用户输入的Javascript乘法表

时间:2016-06-15 13:53:33

标签: javascript if-statement for-loop

我有一个用户输入两个输入的程序,然后当按下显示按钮时,显示这两个数字参数内的乘法表。但是,当我按下按钮时,不会显示任何内容。

    <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>

1 个答案:

答案 0 :(得分:3)

你应该在函数中设置你的变量。当你第一次执行脚本时,你的当前代码会设置它们,并且那时它们有空值。

正确的代码将是。

 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