View original (French)

I need a bit more detail to help with JavaScript. What are you trying to do or what's the issue you're facing?

JeenaHarry -  

Hello,

I need your help to solve a JavaScript problem as part of a school project.

I want to create an HTML and JavaScript tool that calculates the remaining hours and minutes from the current time. This will allow me to know the future time.

Here's the code I prepared:

HTML:

<h1>Time From Now</h1> <label>Hours</label> <input type="number" id="hours" value="0" min="0"> <label>Minutes</label> <input type="number" id="minutes" value="0" min="0"> <button onclick="calculateTime()">Calculate Future Time</button> <div id="result"></div>

JavaScript:

function calculateTime() { var hours = document.getElementById("hours").value; var minutes = document.getElementById("minutes").value; console.log(hours+", "+minutes); let currentTime = new Date(); currentTime.setHours(currentTime.getHours() + hours); currentTime.setMinutes(currentTime.getMinutes() + minutes); let futureTime = currentTime.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }); document.getElementById("result").value = "Future Time: " + futureTime; }

When I run this code, the values of hours and minutes are not being retrieved. The console remains empty.

What could be the problem? Thanks for your help.

2 answers

  1.  Grandasse_

    Hello,
    I can’t reproduce the issue, on my end the values display correctly in the console.

    0
    1. JeenaHarry Author

      Do you get the final result regarding the future time?

      0
    2. jjs
      @JeenaHarry

      The div#result does not have a value attribute; you can use the innerHTML property instead of value to display the result:
      document.getElementById("result").innerHTML = "Future Time: " + futureTime;

      1
    3. JeenaHarry Author
      @jjs

      Ah, I see. The little details are very important in programming.

      0
  2. JeenaHarry Author
    I want to add advanced features to my tool. Could you help me?

    Here’s what I’d like to add:

    1. A counter displaying the current real-time clock.
    2. Conversion between 12-hour and 24-hour time formats.

    Here is the reference: https://time-calculator.net/hours-from-now.html

    Thank you in advance for your help.
    0
    1. pbp

      An example to display the current real-time time:

      www.w3schools.com/js/tryit.asp?filename=tryjs_timers_interval

      For 12-hour or 24-hour formats, you can use the "hour12" option (true or false) in the second parameter of the toLocaleTimeString() method, in addition to the "hour" and "minute" options you are already using.

      0