JavaScript Change click button for automatic

Question

I have this script

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

Can I change instead of clicking the button to calculate being when date1 and date2 are filled do the calculation?

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

Yes. Listen to the input event on the <input> elements.

Terry
– Terry

2021-12-26 10:15:58 +00:00
Commented Dec 26, 2021 at 10:15 — Terry
– Terry, Commented Dec 26, 2021 at 10:15

Tahasin · Accepted Answer · 2021-12-26 10:59:29Z

2

The answer from @Khalil is good. I just want to add something to make the process sequential.

Make the date2 field disabled. As:

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

Then make it dependent on 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)
})

edited Dec 26, 2021 at 10:59

answered Dec 26, 2021 at 10:52

Tahasin

3482 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maik Lowrey · Accepted Answer · 2021-12-26 10:36:02Z

1

You can listen for change event on the input fields and invoke the calculation function.

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

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

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

edited Dec 26, 2021 at 10:36

Maik Lowrey

17.8k8 gold badges54 silver badges101 bronze badges

answered Dec 26, 2021 at 10:17

Khalil

1,5259 silver badges15 bronze badges

1 Comment

user3253195 Over a year ago

Thanks, I leave my solution here : jsfiddle.net/x3uk2nas/1

Carsten Massmann · Accepted Answer · 2021-12-26 12:23:04Z

1

And here is a working snippet:

function calculaDiferenca(ev) {
  var date1 = new Date(ini.value);
  var date2 = new Date(fim.value);
  var timeDiff = Math.abs(date2.getTime() - date1.getTime());
  var diffDays = Math.ceil(timeDiff/(1000*3600*24));
  dif.textContent=diffDays+' dia'+(diffDays===1?'':'s');
  }

const [ini,fim,dif] = "data_inicio,data_fim,dif".split(",").map(t=>document.getElementById(t));
[ini,fim].forEach(e=>e.addEventListener("input",calculaDiferenca));

<input type="date" id="data_inicio" placeholder="inicio">
<input type="date" id="data_fim" placeholder="fim"><br>
<p>Diferenca: <span id="dif"></span></p>

edited Dec 26, 2021 at 12:23

answered Dec 26, 2021 at 10:47

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Collectives™ on Stack Overflow

JavaScript Change click button for automatic

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related