Javascript function error.
-
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 theclass
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
-
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);
})
}) -
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);
})
})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
-
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
-
:) I wrote a similar function for showing that my business is open, based on open and closed hours in TypeScript. It drove me nuts, was always off by an hour, Daylight savings. I'll get back to it soon, now that I have more experience in TypeScript. :(
setStoreHours(): void {
const date = new Date();
const newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
const offset = date.getTimezoneOffset() / 60;
this.hourOfDay = date.getHours();
this.dayOfWeek = date.getDay();
switch (this.dayOfWeek) {
case 0:
// Sunday
this.storeStatus = "Closed";
break;
case 1:
// Monday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 2:
// Tuesday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 3:
// Wednesday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 4:
// Thursday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 5:
// Friday
if (this.hourOfDay > 8 && this.hourOfDay < 15) {
this.storeStatus = "Open";
}
break;
case 6:
// Saturday
this.storeStatus = "Closed";
break;
default:
this.storeStatus = "Closed";
}
}If it ain't broke don't fix it Discover my world at jkirkerx.com
-
:) I wrote a similar function for showing that my business is open, based on open and closed hours in TypeScript. It drove me nuts, was always off by an hour, Daylight savings. I'll get back to it soon, now that I have more experience in TypeScript. :(
setStoreHours(): void {
const date = new Date();
const newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
const offset = date.getTimezoneOffset() / 60;
this.hourOfDay = date.getHours();
this.dayOfWeek = date.getDay();
switch (this.dayOfWeek) {
case 0:
// Sunday
this.storeStatus = "Closed";
break;
case 1:
// Monday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 2:
// Tuesday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 3:
// Wednesday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 4:
// Thursday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 5:
// Friday
if (this.hourOfDay > 8 && this.hourOfDay < 15) {
this.storeStatus = "Open";
}
break;
case 6:
// Saturday
this.storeStatus = "Closed";
break;
default:
this.storeStatus = "Closed";
}
}If it ain't broke don't fix it Discover my world at jkirkerx.com
Where's the best place to learn how to write functions and class functions. I've ran through the courses Richard suggested above but none seem to be taking me where I need to be or am I trying to walk before I can run? :-) To me this should run but it's not returning a value, (or I'm not grasping how to get it to do so)
$(function(){
$("#current-charge").keyup(function(){
var time = $("#time-allowed").val();
var current = $("#current-charge").val();
$("breakeven").html(time * current);
})
}) -
That's JQuery like syntax. IMO, Don't waste your time learning JQuery, I've been there and done that already. JQuery is obsolete now, because modern browsers support modern JavaScript. JQuery adds 3 Lbs to your first page download, and is very heavy in weight, in exchange to write shorthand JavaScript. The reason your not absorbing or moving faster with knowledge is because your looking at shorthand JavaScript/JQuery examples, and trying to understand and copy them. These are very advanced writing skills. You should start with entry level skill writing, and when you get that down, move to shorthand. I would of wrote it like this, for a beginner example. ES6 Use HTML to bind the event to the button, and run
calcTime()
. Use camel case to label things eg. calcTime vs CalcTime vs calc-timelet
has replacedvar
useconst
instead ofvar
orlet
to when something that is constant. Try not to make a lot ofconst
, see how I did it in one line ES6 ExampleCalculate
function calcTime() {
// Make references to input elements
const time = document.getElementById("currentCharge"),
current = document.getElementById("timeAllowed"),
breakEven = document.getElementById("breakEven");// Get the element values, convert to number/float
// By default, values are strings, and don't do math well.
let t = parseFloat(time.value);
let c = parseFloat(current.value);// Perform the equation
let bE = t * c;// Output the equation
breakEven.innerHTML = bE.toString();}
JavaScript comes in many flavors now. I think you want ECMAScript 6, ES6, ECMAScript 2015 From there, you can branch out to TypeScript, Node, etc. I don't know of a good learning course, but you need to stick to one version in order to learn. And when searching for help on the internet, find examples in ES6; learn to identity ES6 examples, and then code and test.
If it ain't broke don't fix it Discover my world at jkirkerx.com
-
:) I wrote a similar function for showing that my business is open, based on open and closed hours in TypeScript. It drove me nuts, was always off by an hour, Daylight savings. I'll get back to it soon, now that I have more experience in TypeScript. :(
setStoreHours(): void {
const date = new Date();
const newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
const offset = date.getTimezoneOffset() / 60;
this.hourOfDay = date.getHours();
this.dayOfWeek = date.getDay();
switch (this.dayOfWeek) {
case 0:
// Sunday
this.storeStatus = "Closed";
break;
case 1:
// Monday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 2:
// Tuesday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 3:
// Wednesday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 4:
// Thursday
if (this.hourOfDay > 8 && this.hourOfDay < 17) {
this.storeStatus = "Open";
}
break;
case 5:
// Friday
if (this.hourOfDay > 8 && this.hourOfDay < 15) {
this.storeStatus = "Open";
}
break;
case 6:
// Saturday
this.storeStatus = "Closed";
break;
default:
this.storeStatus = "Closed";
}
}If it ain't broke don't fix it Discover my world at jkirkerx.com
-
That's JQuery like syntax. IMO, Don't waste your time learning JQuery, I've been there and done that already. JQuery is obsolete now, because modern browsers support modern JavaScript. JQuery adds 3 Lbs to your first page download, and is very heavy in weight, in exchange to write shorthand JavaScript. The reason your not absorbing or moving faster with knowledge is because your looking at shorthand JavaScript/JQuery examples, and trying to understand and copy them. These are very advanced writing skills. You should start with entry level skill writing, and when you get that down, move to shorthand. I would of wrote it like this, for a beginner example. ES6 Use HTML to bind the event to the button, and run
calcTime()
. Use camel case to label things eg. calcTime vs CalcTime vs calc-timelet
has replacedvar
useconst
instead ofvar
orlet
to when something that is constant. Try not to make a lot ofconst
, see how I did it in one line ES6 ExampleCalculate
function calcTime() {
// Make references to input elements
const time = document.getElementById("currentCharge"),
current = document.getElementById("timeAllowed"),
breakEven = document.getElementById("breakEven");// Get the element values, convert to number/float
// By default, values are strings, and don't do math well.
let t = parseFloat(time.value);
let c = parseFloat(current.value);// Perform the equation
let bE = t * c;// Output the equation
breakEven.innerHTML = bE.toString();}
JavaScript comes in many flavors now. I think you want ECMAScript 6, ES6, ECMAScript 2015 From there, you can branch out to TypeScript, Node, etc. I don't know of a good learning course, but you need to stick to one version in order to learn. And when searching for help on the internet, find examples in ES6; learn to identity ES6 examples, and then code and test.
If it ain't broke don't fix it Discover my world at jkirkerx.com
-
That's JQuery like syntax. IMO, Don't waste your time learning JQuery, I've been there and done that already. JQuery is obsolete now, because modern browsers support modern JavaScript. JQuery adds 3 Lbs to your first page download, and is very heavy in weight, in exchange to write shorthand JavaScript. The reason your not absorbing or moving faster with knowledge is because your looking at shorthand JavaScript/JQuery examples, and trying to understand and copy them. These are very advanced writing skills. You should start with entry level skill writing, and when you get that down, move to shorthand. I would of wrote it like this, for a beginner example. ES6 Use HTML to bind the event to the button, and run
calcTime()
. Use camel case to label things eg. calcTime vs CalcTime vs calc-timelet
has replacedvar
useconst
instead ofvar
orlet
to when something that is constant. Try not to make a lot ofconst
, see how I did it in one line ES6 ExampleCalculate
function calcTime() {
// Make references to input elements
const time = document.getElementById("currentCharge"),
current = document.getElementById("timeAllowed"),
breakEven = document.getElementById("breakEven");// Get the element values, convert to number/float
// By default, values are strings, and don't do math well.
let t = parseFloat(time.value);
let c = parseFloat(current.value);// Perform the equation
let bE = t * c;// Output the equation
breakEven.innerHTML = bE.toString();}
JavaScript comes in many flavors now. I think you want ECMAScript 6, ES6, ECMAScript 2015 From there, you can branch out to TypeScript, Node, etc. I don't know of a good learning course, but you need to stick to one version in order to learn. And when searching for help on the internet, find examples in ES6; learn to identity ES6 examples, and then code and test.
If it ain't broke don't fix it Discover my world at jkirkerx.com
Have added some more elements (not in use at present) but still not getting the breakeven to calculate.
<div class='col-sm-2 mb-1'>
<input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='breakeven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
</div>
</div><button type="button" onBlur="calcTime()">Calculate</button>
function calcTime() {
// Make references to input elements
const time = document.getElementById("timeAllowed"),
current = document.getElementById("currentCharge"),
breakEven = document.getElementById("breakEven"),
tier1 = document.getElementById ("tier1"),
tier2= document.getElementById ("tier2");// Get the element values, convert to number/float
// By default, values are strings, and don't do math well.
let t = parseFloat(time.value);
let c = parseFloat(current.value);// Perform the equation
let bE = t * c;// Output the equation
breakEven.innerHTML = bE.toString();}</pre></x-turndown>
-
Have added some more elements (not in use at present) but still not getting the breakeven to calculate.
<div class='col-sm-2 mb-1'>
<input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='breakeven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
</div>
</div><button type="button" onBlur="calcTime()">Calculate</button>
function calcTime() {
// Make references to input elements
const time = document.getElementById("timeAllowed"),
current = document.getElementById("currentCharge"),
breakEven = document.getElementById("breakEven"),
tier1 = document.getElementById ("tier1"),
tier2= document.getElementById ("tier2");// Get the element values, convert to number/float
// By default, values are strings, and don't do math well.
let t = parseFloat(time.value);
let c = parseFloat(current.value);// Perform the equation
let bE = t * c;// Output the equation
breakEven.innerHTML = bE.toString();}</pre></x-turndown>
-
Have added some more elements (not in use at present) but still not getting the breakeven to calculate.
<div class='col-sm-2 mb-1'>
<input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='breakeven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
</div>
</div><button type="button" onBlur="calcTime()">Calculate</button>
function calcTime() {
// Make references to input elements
const time = document.getElementById("timeAllowed"),
current = document.getElementById("currentCharge"),
breakEven = document.getElementById("breakEven"),
tier1 = document.getElementById ("tier1"),
tier2= document.getElementById ("tier2");// Get the element values, convert to number/float
// By default, values are strings, and don't do math well.
let t = parseFloat(time.value);
let c = parseFloat(current.value);// Perform the equation
let bE = t * c;// Output the equation
breakEven.innerHTML = bE.toString();}</pre></x-turndown>
You got it wrong ... You are fresh at this ;) I can't test this at the moment, but it should work. I hope it does.
function calcTime() {
// Make references to input elements
const time = document.getElementById("time"),
current = document.getElementById("current"),
tier1 = document.getElementById ("tier1"),
tier2= document.getElementById ("tier2"),
breakEven = document.getElementById("breakEven"),
results = document.getElementById("results");// Get the element values, convert to number/float
// By default, values are strings, and don't do math well.
let t = parseFloat(time.value);
let c = parseFloat(current.value);// Perform the equation
let bE = t * c;// Output the equation to the span element, remove the comments below
console.log("breakEven=", bE); // Diagnostics, hit F12 on your keyboard and select console
results.innerHTML = bE.toString(); // innerHTML is for a span tag, value is textbox
}Calculate
0
If it ain't broke don't fix it Discover my world at jkirkerx.com
-
Have added some more elements (not in use at present) but still not getting the breakeven to calculate.
<div class='col-sm-2 mb-1'>
<input type='number' id='time' class='form-control' data-calc='time' placeholder='Minutes Allocated' tabindex='2'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='current' class='form-control form-output' data-calc='current' value='£0.00' tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='breakeven' class='form-control form-output' data-calc='breakeven' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier1' class='form-control form-output' data-calc='tier1' value='£0.00' readonly tabindex='-1'>
</div>
<div class='col-sm-2 mb-2'>
<input type='text' id='tier2' class='form-control form-output' data-calc='tier2' value='£0.00' readonly tabindex='-1'>
</div>
</div><button type="button" onBlur="calcTime()">Calculate</button>
function calcTime() {
// Make references to input elements
const time = document.getElementById("timeAllowed"),
current = document.getElementById("currentCharge"),
breakEven = document.getElementById("breakEven"),
tier1 = document.getElementById ("tier1"),
tier2= document.getElementById ("tier2");// Get the element values, convert to number/float
// By default, values are strings, and don't do math well.
let t = parseFloat(time.value);
let c = parseFloat(current.value);// Perform the equation
let bE = t * c;// Output the equation
breakEven.innerHTML = bE.toString();}</pre></x-turndown>
-
Look at the id names you are using in the HTML against the ones you are using in the Javascript. You need to read through your code more closely.