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.

3 answers

  1. JeenaHarry Author
    I want to display the current time in the input fields.

    First field: Hour
    Second field: Minutes
    Third field: Seconds

    How can I display these three values in three separate input fields?
    0
    1. Grandasse_

      Your questions are very well formulated, but at some point you need to learn to look for answers where they are found—it’s part of the method!

      Here’s a clue:

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