时间戳

首页 > 解决方案 > 为什么这些函数中的变量无法计算？

javascript - 为什么这些函数中的变量无法计算？

问题描述

我知道这是一个菜鸟问题，所以请原谅我，但谁能告诉我为什么这两个函数无法计算。（我已经付钱给别人了，但我开始认为他们和我一样有线索）

此功能应通过从净收入中减去目标来计算应支付的佣金金额。

            $(function(){
            $("#Commissionon").keyup(function(){
                var target = $("#target_").val();
                var nettakings = $("#nettakings_").val();
                //alert(targetmultiplier);
                $("#Commissionon_").html();
                $("#Commissionon_").html(nettakings-target);
            })
          })

此函数应返回用户在单元格中键入的百分比，然后应计算到另一个单元格的金额作为上述函数的应付金额。即，如果上述总数为 100 且用户类型为 50%，则金额将显示为 50 英镑的佣金。（% 符号可以在单元格之外）

  $(function(){
    $("#Commissionp").keyup(function(){
        var Commissionp = $("#Commissionp").val();
        //alert(Commissionp);
        $("#Commissionp_").html();
        $("#Commissionp_").html(Commissionp);

完整代码：

$(function() {
  $("#Hourlyrate").keyup(function() {
    var Hoursworked = $("#Hoursworked").val();
    //alert(Hoursworked);
    var Hourlyrate = $("#Hourlyrate").val();
    $("#Basepay_").html();
    $("#Basepay_").html(Hoursworked * Hourlyrate);
  })
})
$(function() {
  $("#Targetmultiplier").keyup(function() {
    var targetmultiplier = $("#Targetmultiplier").val();
    //alert(targetmultiplier);
    var Basepay = $("#Basepay_").html();
    $("#target_").html();
    $("#target_").html(targetmultiplier * Basepay * 1.2);
  })
})
$(function() {
  $("#Grosstakings").keyup(function() {
    var nettakings = $("#Grosstakings").val();
    //alert(targetmultiplier);
    $("#nettakings_").html();
    $("#nettakings_").html(nettakings / 1.2);
  })
})
$(function() {
  $("#Commissionon").keyup(function() {
    var Commissionon = $("#Commissionon").val();
    var target = $("#target_").html();
    var nettakings = $("#nettakings_").html();
    //alert(targetmultiplier);
    $("#Commissionon_").html();
    $("#Commissionon_").html(nettakings - target);
  })
})
$(function() {
  $("#Commissionp").keyup(function() {
    var Commissionp = $("#Commissionp").val();
    //alert(Commissionp);
    $("#Commissionp_").html();
    $("#Commissionp_").html(Commissionp);
  })
})
$(function() {
  $("#Commission").keyup(function() {
    var Commissionon = $("#Commissionon").val();
    //alert(Hoursworked);
    var Commissionp = $("#Commissionp").val();
    $("#Commission_").html();
    $("#Commission_").html(Commissionon * Commissionp);
  })
})
$(function() {
  $("#Wage").keyup(function() {
    var basepay = $("#Basepay_").html();
    //alert(Hoursworked);
    var Commission = $("#Commission").val();
    $("#Wage_").html();
    $("#Wage_").html(basepay + Commission);
  })
})
$(function() {
  $("#Holidayaccrued").keyup(function() {
    var Hourlyrate = $("#Hourlyrate").val();
    // alert(Hourlyrate);
    var Hoursworked = $("#Hoursworked").val();
    $("#Holidayaccrued_").html();
    $("#Holidayaccrued_").html(((12.07 / 100) * Hoursworked) * Hourlyrate);
  })
})
$(function() {
  $("#emppensionp").keyup(function() {
    var emppensionp = $("#emppensionp").val();
    //alert(Hoursworked);
    $("#emppensionp_").html();
    $("#emppensionp_").html(emppensionp);
  })
})
$(function() {
  $("#Emppension").keyup(function() {
    var Emppension = $("#Emppension").val();
    //alert(Hoursworked);
    var Wage = $("#Wage").val();
    $("#Emppension_").html();
    $("#Emppension_").html((Emppension * Wage));
  })
})
$(function() {
  $("#Employerni").keyup(function() {
    var Employerni = $("#Employerni").val();
    //alert(Hoursworked);
    var Wage = $("#Wage").val();
    $("#Employerni_").html();
    $("#Employerni_").html(((Wage * 13.8) / 100));
  })
})
$(function() {
  $("#totalpayroll").keyup(function() {
    var totalpayroll = $("#totalpayroll").val();
    //alert(Hoursworked);
    var Wage = $("#Wage").val();
    var Employerni = $("#Employerni").val();
    var Holidayaccrued = $("#Holidayaccrued").val();
    var emppension = $("#emppension").val();
    $("#totalpayroll_").html();
    $("#totalpayroll_").html(Wage + Employerni + Holidayaccrued + emppension);
  })
})
.divTable {
  display: table;
  width: 60%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #800080;
  display: table-cell;
  padding: 3px 10px;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}

.divTableBody {
  display: table-row-group;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 <!--script src='scripts/jquery-1.7.2.min.js' type='text/javascript'></script>
      <!--script src='scripts/globalize.js' type='text/javascript'></script>
      <script src='scripts/sessvars.js' type='text/javascript'></script-->	

<h1>Calculate Commission and Total Payroll Cost.</h1>
<p>Calculate Commission and Total Payroll Cost.</p>
<hr>
<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell"><label for="Hoursworked"><b>Hours Worked</b></label></div>
      <div class="divTableCell"><input type="number" value="" class="form-control" placeholder="Enter Hours Worked" name="Hoursworked" id="Hoursworked" required></div>
      <div class="divTableCell">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell"><label for="Hourlyrate"><b>Hourly Rate</b></label></div>
      <div class="divTableCell"><input class="form-control" type="number" placeholder="Enter Hourly Rate" id="Hourlyrate" name="Hourlyrate" required></div>
      <div class="divTableCell" id="Basepay_">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell"><label for="Targetmultiplier"><b>Target Multiplier</b></label></div>
      <div class="divTableCell"><input class="form-control" type="number" placeholder="Enter Target Multiplier" name="Targetmultiplier" id="Targetmultiplier" required></div>
      <div class="divTableCell" id="target_">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell"><label for="Grosstakings"><b>Actual Gross Takings</b></label></div>
      <div class="divTableCell"><input class="form-control" type="number" placeholder="Enter Gross Takings" name="Grosstakings" id="Grosstakings" required></div>
      <div class="divTableCell" id="Grosstakings_">&nbsp;</div>
      <div class="divTableCell" id="nettakings_">&nbsp;</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell"><label for="Commissionon"><b>Commission On</b></label></div>
      <div class="divTableCell"><input class="form-control" type="number" placeholder="" name="Commissionon" id="Commissionon" required></div>
      <div class="divTableCell">&nbsp;</div>
      <div class="divTableCell" id="Commissionon_"></div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell"><label for="Commissionp"><b>Commission %</b></label></div>
      <div class="divTableCell"><input class="form-control" type="number" placeholder="Enter Commission %" name="Commission" id="Commissionp" required></div>
      <div class="divTableCell" id="Commissionp_">&nbsp;</div>
      <div class="divTableCell">&nbsp;</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell"><label for="Commission"><b>Commission</b></label></div>
      <div class="divTableCell"><input class="form-control" type="number" placeholder="" name="Commission" id="Commission" required></div>
      <div class="divTableCell" id="Commission_"></div>
      <div class="divTableCell">&nbsp;</div>
    </div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell"><label for="Wage"><b>Wage</b></label></div>
    <div class="divTableCell"><input class="form-control" id="Wage" type="number" placeholder="" name="Wage" required></div>
    <div class="divTableCell" id="Wage_">&nbsp;</div>
    <div class="divTableCell">&nbsp;</div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell"><label for="Holidayaccrued"><b>Holiday Pay Accrued</b></label></div>
    <div class="divTableCell"><input class="form-control" type="number" placeholder="" id="Holidayaccrued" name="Holidayaccrued" required></div>
    <div class="divTableCell">&nbsp;</div>
    <div class="divTableCell" id="Holidayaccrued_">&nbsp;</div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell"><label for="emppensionp"><b>Emp Pension Contribution %</b></label></div>
    <div class="divTableCell"><input class="form-control" type="number" placeholder="" name="emppensionp" id="emppensionp" required></div>
    <div class="divTableCell" id="emppensionp_">&nbsp;</div>
    <div class="divTableCell">&nbsp;</div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell"><label for="Emppension"><b>Employers Pension Contribution</b></label></div>
    <div class="divTableCell"><input class="form-control" type="number" placeholder="" name="Emppension" id="Emppension" required></div>
    <div class="divTableCell">&nbsp;</div>
    <div class="divTableCell" id="Emppension_">&nbsp;</div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell"><label for="Employerni"><b>Employer N.I.</b></label></div>
    <div class="divTableCell"><input class="form-control" type="number" placeholder="" name="Employerni" id="Employerni" required>
    </div>
    <div class="divTableCell">&nbsp;</div>
    <div class="divTableCell" id="Employerni_">&nbsp;</div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell"><label for="totalpayroll"><b>Total Payroll Cost</b></label></div>
    <div class="divTableCell"><input type="number" class="form-control" placeholder="" name="totalpayroll" id="totalpayroll" required></div>

    <div class="divTableCell">&nbsp;</div>
    <div class="divTableCell" id="totalpayroll_">&nbsp;</div>
  </div>

标签： javascript

解决方案

您的代码有几个问题：

1) 您应该使用 onchange 而不是 keyup，因为当您使用 html5 输入按钮更改值时，表单不起作用。

2) 完全没有必要做这样的调用： $("#emppensionp_").html();

3) 变量应以小写字母开头

4）您需要将所有输入值默认为“0”，或者有代码来处理未定义的值。

推荐阅读