JavaScript 将单击按钮更改为自动

Question

我有这个脚本

<script>
        function calculaDiferenca(data_inicio, data_fim) {
          var date1 = new Date(data_inicio);
          var date2 = new Date(data_fim);
          var timeDiff = Math.abs(date2.getTime() - date1.getTime());
          var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
          alert(diffDays + ' dias');
      }

      (function() {
        
          var calcBtn = document.getElementById('calcular');
          
          calcBtn.addEventListener('click', function(){
            
              var data_inicio = document.getElementById('data_inicio').value;
              var data_fim = document.getElementById('data_fim').value;
              
              calculaDiferenca(data_inicio, data_fim);
          });

})();

    </script>  

我可以更改而不是点击按钮来计算日期1和日期2的填充时间吗？

 var calcBtn = document.getElementById('calcular');

Answer 1

@Khalil 的回答很好。我只是想添加一些东西以使该过程按顺序进行。

禁用 date2 字段。如:

<input type="date" id="data_fim" disabled/>

然后使其依赖于 date1。

let first = document.getElementById('data_inicio');
let last  = document.getElementById('data_fim');

first.addEventListener('change', (e) => {
  last.disabled = false
  calculaDiferenca(e.target.value, last.value)
})

last.addEventListener('change', (e) => {
  calculaDiferenca(first.value, e.target.value)
})