JavaScriptが出力されていない

Question

私は数年前にスーパーシンプルなウェブサイトを作って以来、JSを使っていません。新しい計算フォームを追加しようとしましたが、値を出力しません。 数値を入力してから[計算]ボタンを押すと何もしません。 助けてください。

function updateOutput7() { 
 
    //get form 
 
    var form = document.getElementById("calc7"); 
 
    //get number 
 
    var num1 = parseInt(form.elements["x"].value); 
 
    //multiply 2; 
 
    var num2 = 2; 
 
    //add 69 
 
    var num3 = 69; 
 
    //amount1 
 
    var amount1; 
 
    //get output 
 
    var out = form.elements["z"]; 
 

 
    //Calculate 
 
    amount1 = num1 * num2 + num3; 
 

 
    //pick the larger variable 
 
    out.value = amount1 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="calc7" onsubmit="updateOutput7(); return false;"> 
 
    <table> 
 
    <tr> 
 
     <th>Part Cost</th> 
 
     <th></th> 
 
     <th>Charge</th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="number" name="x"> 
 
     </td> 
 
     <td>=</td> 
 
     <td>$ 
 
     <output name="z"></output> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <button type="button" onclick="updateOutput7();">Calculate</button> 
 
</form>

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
     function updateOutput7() { 
      //get form 
      var txtb = document.getElementById("txt"); 
      //get number 
      var num1 = parseInt(txtb.value); 
      if (isNaN(num1)) { 
       document.getElementById("z").innerText = "Invalid Number" 
       return; 
      } 
      //multiply 2; 
      var num2 = 2; 
      //add 69 
      var num3 = 69; 
      //amount1 
      var amount1; 
      //get output 


      //Calculate 
      amount1 = num1 * num2 + num3; 

      //pick the larger variable 
      document.getElementById("z").innerText = amount1; 
     } 
    </script> 
    <form id="calc7" onsubmit="updateOutput7(); return false;"> 
     <table> 
      <tr> 
       <th>Part Cost</th> 
       <th></th> 
       <th>Charge</th> 
      </tr> 
      <tr> 
       <td> 
        <input id="txt" type="text" name="x"> 
       </td> 
       <td>=</td> 
       <td> 
        $ 
        <span id="z"></span> 
       </td> 
      </tr> 
     </table> 
     <button type="button" onclick="updateOutput7();">Calculate</button> 
    </form>