Question

用户将输入三个值数量，负载，持续时间，然后单击总计按钮以显示瓦时textbox的乘法。但我总是得到0或NaN。我尝试输入type="number"但总是得到相同的结果。这是代码：

＆＃13;

$(document).ready(function() {

var quantityval = parseInt($("#quantity").text(), 10);
var wattsval = $("#wattage option:selected").val();
var duration = parseInt($("#duration_use").text(), 10);

$("#total").click(function() {
  var totalval = (quantityval * wattsval) * duration;
  $("#watt-hour").val(totalval);
  console.log($("#watt_hour").val(totalval));
});

＆＃13;

<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">

  <thead class="bg-primary">
    <tr>
      <th colspan="2">Load Type</th>
      <th>Quantity</th>
      <th>Wattage (W)</th>
      <th>Duration Use</th>
      <th>Watt Hour</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody class="bg-success">
    <tr>
      <td colspan="2">
        <select class="form-control" id="type">
<option>Fan</option>
<option>Iron</option>
<option>Blub</option>
<option>Motor</option>
<option>AC</option>
</select>
      </td>
      <td><input type="text" size="10px" class="form-control" id="quantity" /></td>
      <td>
        <!-- <input type="text" name="wattage" id="wattage" placeholder="Enter Consumption in Watts" class="form-control"> -->
        <select class="form-control" id="wattage">
<option>25</option>
<option>30</option>
<option>45</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
      </td>
      <td><input type="text" size="10px" class="form-control" id="duration_use" /></td>
      <td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
      <td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

这里有多个问题，

使用val代替text
直接取select而不是option
在点击事件中提取值
设置值时使用watt_hour代替watt-hour。

成功

var quantityval = +$("#quantity").val();
var wattsval = +$("#wattage").val();
var duration = +$("#duration_use").val();

注意

parseInt很好，我只是让一元+保持简短。

<强>演示

$(document).ready(function() { $("#total").click(function() { var quantityval = +$("#quantity").val(); var wattsval = +$("#wattage").val(); var duration = +$("#duration_use").val(); console.log(quantityval, wattsval, duration); var totalval = (quantityval * wattsval) * duration; console.log(quantityval, wattsval, duration, totalval); $("#watt_hour").val(totalval); console.log($("#watt_hour").val()); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table-bordered table table-md text-center table-responsive table-lg" id="table"> <thead class="bg-primary"> <tr> <th colspan="2">Load Type</th> <th>Quantity</th> <th>Wattage (W)</th> <th>Duration Use</th> <th>Watt Hour</th> <th>Total</th> </tr> </thead> <tbody class="bg-success"> <tr> <td colspan="2"> <select class="form-control" id="type"> <option>Fan</option> <option>Iron</option> <option>Blub</option> <option>Motor</option> <option>AC</option> </select> </td> <td><input type="text" size="10px" class="form-control" id="quantity" /></td> <td>  <select class="form-control" id="wattage"> <option>25</option> <option>30</option> <option>45</option> <option>80</option> <option>100</option> <option>120</option> <option>1000</option> <option>1500</option> <option>2000</option> <option>2500</option> </select> </td> <td><input type="text" size="10px" class="form-control" id="duration_use" /></td> <td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td> <td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td> </tr> </tbody> </table>

Answer 2

将.text()替换为.val()并检索点击事件句柄中的所有值

$(document).ready(function() {



  $("#total").click(function() {
    var quantityval = parseInt($("#quantity").val(), 10);
    var wattsval = $("#wattage option:selected").val();
    var duration = parseInt($("#duration_use").val(), 10);

    var totalval = (quantityval * wattsval) * duration;
    console.log(totalval)
    $("#watt_hour").val(totalval);

  });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">

  <thead class="bg-primary">
    <tr>
      <th colspan="2">Load Type</th>
      <th>Quantity</th>
      <th>Wattage (W)</th>
      <th>Duration Use</th>
      <th>Watt Hour</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody class="bg-success">
    <tr>
      <td colspan="2">
        <select class="form-control" id="type">
<option>Fan</option>
<option>Iron</option>
<option>Blub</option>
<option>Motor</option>
<option>AC</option>
</select>
      </td>
      <td><input type="text" size="10px" class="form-control" id="quantity" /></td>
      <td>
        <!-- <input type="text" name="wattage" id="wattage" placeholder="Enter Consumption in Watts" class="form-control"> -->
        <select class="form-control" id="wattage">
<option>25</option>
<option>30</option>
<option>45</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
      </td>
      <td><input type="text" size="10px" class="form-control" id="duration_use" /></td>
      <td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
      <td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
    </tr>
  </tbody>
</table>

根据值返回0或NaN计算负载

2 个答案: