为什么我的函数没有从空白输入框中获取值并正确执行函数

Why is my function not grabbing the values from a blank input box and executing the function correct?

本文关键字：函数 获取 执行 输入 我的 为什么 空白      更新时间：2023-09-26

在我的程序中，我编写了几个函数，这样当你键入从1到550的任何数量的持票人和补充通行证时，然后当你点击"计算可用座位"按钮时，它会显示："可用座位的数量是"，然后555减去持票人的数量和补充通行证件的数量。然而，使用我当前的代码，当我在两个带有两个随机数字的空白框中输入完毕，然后单击"计算可用座位"按钮时，它总是返回"可用座位数为555"。我希望程序首先从555（飞机上的最大座位数）中减去持票人和通行证的两个值，然后显示这个值，而不仅仅是555。

    var TicketHolders = parseInt(document.getElementById("txtTickets").value) || 0;
    var ComplementaryPasses = parseInt(document.getElementById("txtPasses").value) || 0;
    
    function number_of_available_seats(TicketHolders, ComplementaryPasses) {
      var answer = 555 - (TicketHolders + ComplementaryPasses);
    	return("The number of available seats is " + answer);
    }
    var button = document.getElementById("btnSubmit");
    
    
    
    function showresults(TicketHolders, ComplementaryPasses) {
    	document.getElementById("results").innerHTML = number_of_available_seats(TicketHolders, ComplementaryPasses);
    }
    
    function clickonbutton(){
    showresults(TicketHolders, ComplementaryPasses);
    }
    
    button.onclick = function() {
    clickonbutton();
    };
    <!-- airbus.html -->
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Airbus Seat Calculator</title>
    <style>
    DIV.movable { position:absolute;}
    </style>
    
    </head>
     
    <body>
    
      <h2>Airbus Seat Calculator</h2>
     
      <form id="formTest" method="get" action="processData">
        <table>
        
        <tr>
          <td><label for="txtTickets">Ticket Holders<span class="inputs"></span></label></td>
          <td><input type="text" id="txtTickets" name="tickets"></td>
        </tr>
        <tr>
          <td><label for="txtPasses">Complementary Passes<span class="inputs"></span></label></td>
          <td><input type="text" id="txtPasses" name="passes"></td>
        </tr>
        
        
        <tr>
          <td>&nbsp;</td>
          <td>
              <input type="button" value="Calculate Available Seats" id="btnSubmit"></td>
        </tr>
        </table>
      </form>
    
    <div id="results">	
    </div>
    <h2>Your Copyright Info Goes Here</h2>
    <script src="airbus.js">
    
    
    </script>
    
    </body>
    </html>

您有：

var TicketHolders = parseInt(document.getElementById("txtTickets").value) || 0;
var ComplementaryPasses = parseInt(document.getElementById("txtPasses").value) || 0;

在脚本的顶部。它只调用一次，所以只计算一次（在页面加载时）。只需将其向下移动到clickonbutton功能中，您就会在单击按钮时获得值：

    function number_of_available_seats(TicketHolders, ComplementaryPasses) {
      var answer = 555 - (TicketHolders + ComplementaryPasses);
    	return("The number of available seats is " + answer);
    }
    var button = document.getElementById("btnSubmit");
    
    
    
    function showresults(TicketHolders, ComplementaryPasses) {
    	document.getElementById("results").innerHTML = number_of_available_seats(TicketHolders, ComplementaryPasses);
    }
    
    function clickonbutton(){
      var TicketHolders = parseInt(document.getElementById("txtTickets").value) || 0;
    var ComplementaryPasses = parseInt(document.getElementById("txtPasses").value) || 0;
    showresults(TicketHolders, ComplementaryPasses);
    }
    
    button.onclick = function() {
    clickonbutton();
    };
<!-- airbus.html -->
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Airbus Seat Calculator</title>
    <style>
    DIV.movable { position:absolute;}
    </style>
    
    </head>
     
    <body>
    
      <h2>Airbus Seat Calculator</h2>
     
      <form id="formTest" method="get" action="processData">
        <table>
        
        <tr>
          <td><label for="txtTickets">Ticket Holders<span class="inputs"></span></label></td>
          <td><input type="text" id="txtTickets" name="tickets"></td>
        </tr>
        <tr>
          <td><label for="txtPasses">Complementary Passes<span class="inputs"></span></label></td>
          <td><input type="text" id="txtPasses" name="passes"></td>
        </tr>
        
        
        <tr>
          <td>&nbsp;</td>
          <td>
              <input type="button" value="Calculate Available Seats" id="btnSubmit"></td>
        </tr>
        </table>
      </form>
    
    <div id="results">	
    </div>
    <h2>Your Copyright Info Goes Here</h2>
    
    </script>
    
    </body>
    </html>

相关文章：