Javascript function error.

and180y

Can anyone point me in the right direction with this please? I have these inputs and below a function to give me the hours open, except it doesn't. I've tried putting the function in online checkers and all is okay according to them but it doesn't calculate. Thanks in advance. <div class='col-sm-2 mb-2'> <input type='text' id='opening-time' class='form-control' data-calc='openingTime' value='00.00' tabindex='-1'> </div> <div class='col-sm-2 mb-2'> <input type='text' id='closing-time' class='form-control' data-calc='closingTime' value='00.00' tabindex='-1'> </div> <div class='col-sm-2 mb-2'> <input type='text' id='hoursOpen' class='form-control form-output' data-calc='hoursOpen' value='00.00'readonly tabindex='-1'> </div> </div>

$(function(){
$("#closingTime").keyup(function(){
var openingTime = $("#openingTime").val();
var closingTime = $("#closingTime").val();
$("hoursOpen").html(closingTime-openingTime);
})
})

Lost User

Your keyup call is not using the id of the HTML element. It should be:

$("#closing-time").keyup(function(){

Richard Deeming

NB: If your users are entering hours and minutes, your calculation is going to be wrong. For example, 09:45 to 10:15 should be 0.5 hours, but "10.15" - "09.45" will return 0.7000000000000011.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

and180y

Hi Richard, thanks for replying. :) I noticed that when I was searching for answers to my initial problem, nothing is ever easy it seems. The function I was trying to create would be used elsewhere but as yet I still can't get it to return a value.

and180y

Thanks for replying Richard. :) I have made the change you gave me but still not getting it to return a value. I'm still searching for my "lightbulb moment" with these functions.

Lost User

Try adding a return statement (with an associated value) at the end of the function.

and180y

Thanks Richard, not sure what I have done wrong here as still not giving a value for hours open.

$(function(){
$("#closing-time").keyup(function(){
var openingTime = $("#openingTime").val();
var closingTime = $("#closingTime").val();
$("hoursOpen").html(closingTime-openingTime);
return hoursOpen.html;

Estys

$("hoursOpen")

should probably be

$("#hoursOpen")

If you can read this, you don't have WingDings installed

Lost User

You have not declared hoursOpen anywhere. And what about the previous statement, does that not set the value in the html? If so why are you trying to return a value?

and180y

Hi Richard, thanks. I thought I had cobbled something together that would work from the lessons I saw and looking at other code. As I say there must be a lighbulb moment I am missing. :)

and180y

Estys Thanks, I think from other replies I am on the wrong track. :(

Lost User

See JavaScript Tutorial[^] and jQuery Tutorial[^] for more help.

Richard Deeming

Try something like this:

$(function(){
// Convert either "HH.mm" or "HH:mm" to the number of minutes since midnight
var parseMinutes = function(value){
var parts = value.split(/[.:]/g);
switch (parts.length) {
case 1: {
return parseFloat(parts[0]) * 60;
}
case 2: {
var hours = parseFloat(parts[0]);
var minutes = parseFloat(parts[1]);
return (hours * 60) + minutes;
}
default: {
return 0;
}
}
};

// Format a number of minutes as "HH:mm"
var formatMinutes = function(minutes){
    var hours = Math.floor(minutes / 60);
    minutes %= 60;
    
    return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
};

var updateHoursOpen = function(){
    var openingTime = $("#opening-time").val();
    var closingTime = $("#closing-time").val();
    
    var openingMinutes = parseMinutes(openingTime);
    var closingMinutes = parseMinutes(closingTime);
    var minutesOpen = closingMinutes - openingMinutes;
    
    // If closing is before opening, the time spans midnight. Add a day's worth of minutes:
    if (minutesOpen < 0) {
        minutesOpen += 1440;
    }
    
    var hoursOpen = formatMinutes(minutesOpen);
    $("#hoursOpen").val(hoursOpen);
    return hoursOpen;
};

// Update the hours when either input is changed:
$("#opening-time, #closing-time").keyup(updateHoursOpen);

});

Demo[^] NB: padStart doesn't work in Internet Explorer. But since even Microsoft agree that IE isn't a browser[^], it's usually safe to ignore it these days.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

and180y

Richard, thankyou so much for that, weirdly I'm still not getting a value for hours open. Sticking my head in the oven is starting to look appealing. :laugh:

and180y

Richard, my apologies. It has oft been said "there are none so blind as them that cannot see" Your code does work, I just wasn't looking at it correctly. :doh: :doh: Is there a way I can make it work for each day from the same code or would it need that code for each day? Thanks for your help so far. :)

Richard Deeming

I'm not sure what you mean by "each day"? Do you mean you have multiple sets of inputs for opening time, closing time, and hours? You can't use the same ID for multiple elements in the same HTML document. You'll need to find a different way of identifying the elements, and linking the three <input> elements for a given day together. For example, you could use the class attribute:

<div class="opening-day">
<p>Monday</p>
<p>
<label>
Opening:
<input type='text' class='opening-time' value='00:00'>
</label>
</p>
<p>
<label>
Closing:
<input type='text' class='closing-time' value='00:00'>
</label>
</p>
<p>
Result:
<input type='text' class='hours-open' value='00:00' readonly>
</p>
</div>

var updateHoursOpen = function($div){
var openingTime = $div.find(".opening-time").val();
var closingTime = $div.find(".closing-time").val();

var openingMinutes = parseMinutes(openingTime);
var closingMinutes = parseMinutes(closingTime);
var minutesOpen = closingMinutes - openingMinutes;
if (minutesOpen < 0) {
    minutesOpen += 1440;
}

var hoursOpen = formatMinutes(minutesOpen);
$div.find(".hours-open").val(hoursOpen);
return hoursOpen;

};

$(".opening-day").on("keyup", ".openingtime, .closing-time", function(){
var $div = $(this).closest(".opening-day");
updateHoursOpen($div);
});

Demo[^] .find() | jQuery API Documentation[^] .closest() | jQuery API Documentation[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

and180y

Hi Richard, thanks so much. Yes basically the page has all 7 days, a check box if open that day and input boxes for opening and closing hours and the hours open. I will use the code above. thankyou.

DerekT P

Saw this thread, and suddenly had awful deja vu back to 17th Feb 1999[^] (This is one of my all-time favourite Dilberts, simply because I see it in real life so often!)

jkirkerx

I know I'm late on this, but 0 - 0 is 0 opening time is 0 or 12 midnight closing time is 0 or 12 midnight so you get 0

If it ain't broke don't fix it Discover my world at jkirkerx.com

and180y

I was just glad the code worked. :) :)