Javascript Multiplikationstabelle basierend auf Benutzereingabe

Question

Ich habe ein Programm, wo der Benutzer zwei Eingaben eingibt, und dann, wenn die Anzeigetaste gedrückt wird, wird die Multiplikationstabelle innerhalb der Parameter dieser zwei Zahlen angezeigt. Wenn ich jedoch die Taste drücke, wird nichts angezeigt.

<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

Sie Ihre Variable innerhalb der function.in Ihren aktuellen Code festgelegt, bei dem sie festgelegt werden, wenn das erste Mal Skript ausgeführt zu werden und zu diesem Zeitpunkt sie Blindwert haben.

Korrekter Code wird.

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

Sie können die Dinge auf dem unteren Plunker überprüfen.

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