Question

我有这个代码

$(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>

逻辑很简单：

获取价格
获取DP
打印减号会导致剩余输入

但是以某种方式它不会在剩余输入中打印任何内容。

知道我做错了什么吗？

Answer 1

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

您应该在某些事件上执行代码，如下所示：

$(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>

Answer 2

我认为您应该将计算置于就绪功能因为它是异步的

 $( document ).ready(function() {
     console.log( "ready!" );
     // calculation
  });

或者更好地使用angular ...而不是jQuery

Answer 3

计算是正确的，但它在页面就绪事件中确实执行过一次
添加手动按钮以告诉javascrip何时计算值
还添加事件侦听器以自动调用更改

    <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>

    <button type="button"
    onclick="cal()">
    cal
    </button>

    $(function() {
      document.getElementById("price").addEventListener("change",cal);
      document.getElementById("dp").addEventListener("change",cal);
    });


    function cal(){
      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);
      }
    }

Answer 4

js代码在初始加载网页时运行。 js代码必须由onclick或onkeyup

调用

JavaScript计算不会显示结果

4 个答案: