时间戳

首页 > 解决方案 > JavaScript 计算不会打印结果

javascript - JavaScript 计算不会打印结果

问题描述

我有这个代码

$(function() {
  if(document.getElementById('price') !== null && document.getElementById('dp') !== null){
    var price = document.getElementById('price').value;
    var deposite = document.getElementById('dp').value;
    document.getElementById('remained').value = parseInt(price)-parseInt(deposite);
  }
});

我的表单中的这个字段

<div class="col-md-3">
    <label for="price">Price *</label>
    <input type="number" class="form-control" id="price" name="price">
</div>
<div class="col-md-3">
    <label for="dp">DP *</label>
    <input type="number" class="form-control" id="dp" name="dp">
</div>
<div class="col-md-3">
    <label for="remained">Remained *</label>
    <input type="number" class="form-control" id="remained" name="remained">
</div>

逻辑很简单：

  1. 获取价格
  2. 获得DP
  3. 打印减号导致剩余输入

但不知何故，它不会在剩余输入中打印任何内容。

知道我做错了什么吗？

标签： javascript

解决方案

您的代码在页面加载时执行，并且输入的值为空。

您应该像以下方式在某些事件上执行代码：

$(function() {
  $('#dp, #price').on('input', function(){    
    if(document.getElementById('price') !== null && document.getElementById('dp') !== null){
      var price = document.getElementById('price').value;
      var deposite = document.getElementById('dp').value;
      document.getElementById('remained').value = parseInt(price)-parseInt(deposite);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
    <label for="price">Price *</label>
    <input type="number" class="form-control" id="price" name="price">
</div>
<div class="col-md-3">
    <label for="dp">DP *</label>
    <input type="number" class="form-control" id="dp" name="dp">
</div>
<div class="col-md-3">
    <label for="remained">Remained *</label>
    <input type="number" class="form-control" id="remained" name="remained">
</div>

推荐阅读