Question

我的网站上有一个可用于计算业务费用的计算器。目前，当用户输入数字时，计算器会实时自动计算。我希望用户必须单击计算按钮才能看到任何结果。有人可以帮忙，因为我很难自己调整代码。这是当前的代码：

function calc() {

  var cost = document.getElementById('phone').value * (.30) +
    document.getElementById('energy').value * (.05) +
    document.getElementById('cell').value * (.30) + document.getElementById('office').value * (.15) + document.getElementById('card').value *
    (.35) + document.getElementById('waste').value * (.5) +
    document.getElementById('payroll').value * (.5);

  document.getElementById('cost').value = (cost * 12).toFixed(2);

}

<form name="form1" method="post" action="">
  <table width="33%" align="center">
    <tr>
      <td valign="top" style="text-align: center"><strong>  
  Category</strong>
      </td>
      <td style="text-align: center"><strong>Monthly Expenses</strong>
      </td>
    </tr>
    <tr>
      <td valign="top">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td width="47%" valign="top">Telephone &amp; Internet</td>
      <td width="53%">
        <input name="phone" id="phone" type="text" onchange="calc
  ()" />
      </td>
    </tr>
    <tr>
      <td valign="top">Energy</td>
      <td>
        <input name="energy" id="energy" type="text" onchange="calc()" />
      </td>
    </tr>
    <tr>
      <td valign="top">Cell Phone</td>
      <td>
        <input name="cell" id="cell" type="text" onchange="calc()" />
      </td>
    </tr>
    <tr>
      <td valign="top">Office Supplies</td>
      <td>
        <input name="office" id="office" type="text" onchange="calc()" />
      </td>
    </tr>
    <tr>
      <td valign="top">Merchant Card Fees</td>
      <td>
        <input name="card" id="card" type="text" onchange="calc()" />
      </td>
    </tr>
    <tr>
      <td valign="top">Waste Removal</td>
      <td>
        <input name="waste" id="waste" type="text" onchange="calc()" />
      </td>
    </tr>
    <tr>
      <td height="31" valign="top">3rd Party Payroll Fees</td>
      <td>
        <input name="payroll" id="payroll" type="text" onchange="calc  
  ()" />
      </td>
    </tr>
    <tr>
    </tr>
  </table>
  <p>&nbsp;</p>
  <div align="center">
    <table width="33%" border="0">
      <tr>
        <td width="54%" height="31" valign="top"><strong>Estimated Annual 
  Savings:</strong>
        </td>
        <td width="46%">
          <textarea name="cost" rows="1" id="cost" readonly style="overflow:hidden" input type="number"></textarea>
        </td>
      </tr>

Answer 1

目前，您的输入设置为在calc()事件被触发时调用onchange。只要值发生变化且输入模糊（不再处于焦点），就会发生这种情况。

删除所有输入的onchange="calc()"属性，并使用onclick="calc()"在页面上添加一个有意义的按钮：

<button onclick="calc()">Calculate</button>

Answer 2

使用Javascript事件外部表单

放置按钮

<button onclick="calc();">Calculate</button>

Answer 3

删除所有onchange =＆＃34; calc（）＆＃34;并将此HTML代码添加到您的页面中，即可。

   <button onclick="calc()">Calculate Expenses</button>

Answer 4

删除对onchange =＆＃34; calc（）＆＃34;的调用来自所有人。
放<div align="center"> <table width="33%" border="0"> <tr> <td align="Center"> <input type="button" value="Click To Calculate" onclick="calc()" /> </td> </tr> </div>

javascript计算器点击计算

4 个答案: