CODEWITHSUNDEEP
javascripthtml
Andres Hansen
Andres Hansen

Reputation: 61

How to calculating time difference

I'm trying to make a program where i put in to different times and get the difference in minute after clicking the "calculate" button. I'm not sure if my approach is correct, there may be some typo's.

I'v tried to make the different input values to number but it seems like there is another underlying problem which I can't see.

var hour1=document.getElementById("hour1");
var min1=document.getElementById("min1");
var hour2=document.getElementById("hour2");
var min2=document.getElementById("min2");

function calc(){
    var minutt1=Number(hour1)*60+Number(min1);
    var minutt2=Number(hour2)*60+Number(min2);
    var resultat=0;
    resultat = Number(minutt1) - Number(minutt2);
    document.getElementById("result").innerHTML="Time differance is:" + Number(resultat);
}
<input type="number" id="hour1">:
<input type="number" id="min1"> - 
<input type="number" id="hour2">:
<input type="number" id="min1">
<button type="button" onclick="calc()">Regn ut</button>

<div id="result"></div>

I expect getting a number which represents the time difference in minutes, but the actual output is "NaN".

Upvotes: 2

Views: 71

Answers (2)

Arleigh Hix
Arleigh Hix

Reputation: 10897

Other answers are close, but you need to get the value of the inputs after you click the button

var hour1 = document.getElementById("hour1");
var min1 = document.getElementById("min1");
var hour2 = document.getElementById("hour2");
var min2 = document.getElementById("min2");

window.calc = function () {
  var minutt1 = parseInt(hour1.value) * 60 + parseInt(min1.value);
  var minutt2 = parseInt(hour2.value) * 60 + parseInt(min2.value);
  var resultat = minutt1 - minutt2;
  document.getElementById("result").innerHTML = "Time differance is:" + resultat;
  
  console.log({minutt1:minutt1,minutt2:minutt2,resultat:resultat,
  hour1:hour1,min1:min1,
  hour2:hour2,min2:min2
  })
};
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min2">
<button type="button" onclick="calc()">Regn ut</button>

<div id="result"></div>

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44145

You need to get the value of hour1, min1, hour2, and min2. You also don't have an element min2:

var hour1=document.getElementById("hour1").value;
var min1=document.getElementById("min1").value;
var hour2=document.getElementById("hour2").value;
var min2=document.getElementById("min2").value;

What your code was trying to do was multiply and subtract HTML elements (never a good idea).

var hour1 = document.getElementById("hour1").value;
var min1 = document.getElementById("min1").value;
var hour2 = document.getElementById("hour2").value;
var min2 = document.getElementById("min2").value;

function calc() {
  var minutt1 = Number(hour1) * 60 + Number(min1);
  var minutt2 = Number(hour2) * 60 + Number(min2);
  var resultat = 0;
  resultat = Number(minutt1) - Number(minutt2);
  document.getElementById("result").innerHTML = "Time differance is:" + Number(resultat);
}
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min2">
<button type="button" onclick="calc()">Regn ut</button>

<div id="result"></div>

Upvotes: 2

Related Questions