Javascript Multiplication Table Based On User Input

I have a program where the user enters two inputs, and then when the display button is pressed, the multiplication table within the parameters of those two numbers is displayed. However, when I press the button, nothing is displayed.

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