Using two gethours() but always same result in javascript-CodePudding

I wanted to get start time and end time separately so I wrote code like this:

const date = new Date();
let start = date.getHours()   date.getMinutes() / 60   date.getSeconds() / 60 / 60;

function startRecord() {
  document.getElementById("1").innerHTML = start;
}

function endRecord() {
  let end = date.getHours()   date.getMinutes() / 60   date.getSeconds() / 60 / 60;
  document.getElementById("2").innerHTML = end;
}

<p id="1">Show start time</p>
<p id="2">Show end time</p>

<button type="button" onclick="startRecord()">
  start
</button>
<button type="button" onclick="endRecord()">
  end
</button>

But I always got same result.
Start time and end time is same although I spent some time between them.
How can I get correct result?

CodePudding user response：

Because you have only one instance of date. You must use 2 variables of date.

CodePudding user response：

You need to make a new date object if you want a new time. Change your javascript to this:

    let date = new Date();
    let start = date.getHours()   date.getMinutes() / 60   date.getSeconds() / 60 / 60;
    function startRecord() {
      date = new Date();
      document.getElementById("1").innerHTML = start;
    }
    function endRecord() {
      date = new Date();
      let end = date.getHours()   date.getMinutes() / 60   date.getSeconds() / 60 / 60;
      document.getElementById("2").innerHTML = end;
    }

CodePudding user response：

Your code gets the current date/time at the time the script loads, not when the button is clicked.

You need to get the date/time in the click handler, so it reflects the moment the click happened.

Since you need to do the same calculation in both click handlers, put that logic in a function and call it from both click handlers:

function getCurrentTime() {
  const date = new Date();
  return date.getHours()   date.getMinutes() / 60   date.getSeconds() / 60 / 60;
}  

function startRecord() {
  document.getElementById("1").innerHTML = getCurrentTime();
}

function endRecord() {
  document.getElementById("2").innerHTML = getCurrentTime();
}

<p id="1">Show start time</p>
<p id="2">Show end time</p>

<button type="button" onclick="startRecord()">
  start
</button>
<button type="button" onclick="endRecord()">
  end
</button>

CodePudding user response：

Your date variable (const date = new Date();) is defined only once when the app loads. When you make calls to date.getHours() and equivalent, you're only translating that first snapshot into a new format. You're not taking a new snapshot of the current time to measure the differences.

In order to fix this, you should move the definition of date to each of the button function calls. This way, every time you click the button you're taking a new snapshot of the current time.

function startRecord() {
  const date = new Date();
  const start = date.getHours()   date.getMinutes() / 60   date.getSeconds() / 60 / 60;
  document.getElementById("1").innerHTML = start;
}

function endRecord() {
  const date = new Date();
  const end = date.getHours()   date.getMinutes() / 60   date.getSeconds() / 60 / 60;
  document.getElementById("2").innerHTML = end;
}

<p id="1">Show start time</p>
<p id="2">Show end time</p>

<button type="button" onclick="startRecord()">
  start
</button>
<button type="button" onclick="endRecord()">
  end
</button>

This being said, this is measuring the time on the current date/time. If what you're trying to do is to measure the time difference between two clicks, you should use performance.now() or an equivalent method.

This might be a better implementation:

function startRecord() {
  const start = performance.now() / 1000;
  document.getElementById("1").innerHTML = start;
}

function endRecord() {
  const end = performance.now() / 1000;
  document.getElementById("2").innerHTML = end;
}

<p id="1">Show start time</p>
<p id="2">Show end time</p>

<button type="button" onclick="startRecord()">
  start
</button>
<button type="button" onclick="endRecord()">
  end
</button>

These are taking the time with regards the "time origin". If you just want the difference between both, you would need to store start and substract from end.

CodePudding user response：

You can do like this :

    let currentDate = new Date();
    let endDate = null;
    let start = currentDate.getHours()   currentDate.getMinutes() / 60   currentDate.getSeconds() / 60 / 60;

   function startRecord() {
     document.getElementById("1").innerHTML = start;
   }

   function endRecord() {
     endDate = new Date();
     let end = endDate.getHours()   endDate.getMinutes() / 60   endDate.getSeconds() / 60 / 60;
     document.getElementById("2").innerHTML = end;
   }

CodePudding user response：

Creating the date object at the top of the code will create a date object automatically when the javascript is executed. So when coming to the button click it will sill be the same date that was created before at code execution. You can create the date objects inside the functions so it will get the timestamp at the time of button click.

function startRecord() {
  const date = new Date();
  let start = date.getHours()   date.getMinutes() / 60   date.getSeconds() / 60 / 60;
  document.getElementById("1").innerHTML = start;
}

function endRecord() {
  const date = new Date();
  let end = date.getHours()   date.getMinutes() / 60   date.getSeconds() / 60 / 60;
  document.getElementById("2").innerHTML = end;
}



<p id="1">Show start time</p>
<p id="2">Show end time</p>


<button type="button" onclick="startRecord()">
  start
</button>
<button type="button" onclick="endRecord()">
  end
</button>