I am creating a JS function that takes a time input in minutes only and divides that number by an inputted digit. I would like to know how we use Javascript to convert that result into minutes and seconds.
For instance, 30 (1800 seconds) divided by 4 = 450 seconds. How do I show that as 7:30? I can divide by 60 to get 7.5, but I don’t know how to go from there. I got as far as the following, then got stuck.
<form id="form2"><table>
<tr>
<td class="alignright">
<form id="pitStops">
Main length (minutes): <input class="display" type="number" size="4" value="" name="main">
</td>
</tr>
<tr>
<td class="alignright">
Number of pit stops: <input class="display" type="number" size="4" value="" name="STOPSnum">
</td>
</tr>
<tr>
<td class="alignright">
<input id="resultPitStops" class="buttPress2" type="button" value="Pit Time = ">
<input id="timeBetween" class="display2" size="4" type="number" value="" name="between"></td>
</tr>
</table></form>
<SCRIPT LANGUAGE="JavaScript">
function heatpit(form) {
e = form.elements.main.value,
f = form.elements.STOPSnum.value,
secs2 = e * 60;
periods = f + 1;
result2 = secs2 / periods;
form.elements.between.value = result2;
}
resultPitStops.onclick = function () {
var form = document.getElementById('form2');
heatpit(form);
}
</SCRIPT>
Thanks!
You can use Math.floor to remove the decimal amount, leaving you with the number of minutes.
To get the number of seconds, you can use the modulus operator with what you divided by, to obtain the remainder.
var minutes = Math.floor(450 / 60); // 7
var seconds = 450 % 60; // 30
450 seconds is 7 minutes and 30 seconds
Wow, thanks for the help! This is my current status. I implemented your code, but I’m not getting any results into the field. Where is my JS wrong?
<form id="form2"><table>
<tr>
<td class="alignright">
<form id="pitStops">
Main length (minutes): <input class="display" type="number" size="4" value="" name="main">
</td>
</tr>
<tr>
<td class="alignright">
Number of pit stops: <input class="display" type="number" size="4" value="" name="STOPSnum">
</td>
</tr>
<tr>
<td class="alignright">
<input id="resultPitStops" class="buttPress2" type="button" value="Pit Time = ">
<input id="timeBetween" class="display2" size="4" type="number" value="" name="between"></td>
</tr>
</table></form>
<SCRIPT LANGUAGE="JavaScript">
function heatpit(form) {
var e = form.elements.main.value, // put main field value into variable e
var f = form.elements.STOPSnum.value, // put STOPSnum field value into variable f
var secs2 = e * 60; // convert the minutes into seconds
var periods = f + 1; // add 1 to the pit stop number get the number of divisions throughout the period
var result2 = secs2 / periods; // divide the full time by the number of periods
var seconds = result2 % 60; // use modulus operator to get the remainder and convert into seconds figure
var minutes = math.floor(secs2 / 60); // get the minute figure as a digit
var time = minutes + ":" + seconds; // concatenate everything into minutes and seconds
form.elements.between.value = time; // display in the "between" field
}
resultPitStops.onclick = function () {
var form = document.getElementById('form2');
heatpit(form);
}
</SCRIPT>
It seems to be at this part.
resultPitStops.onclick = function () {
The resultPitStops value doesn’t exist. You may want to instead use getElementsById to obtain a reference to that button, from which you can then assign an onclick event.
But isn’t that button value right here?
<input id=“resultPitStops” class=“buttPress2” type=“button” value="Pit Time = ">
That’s not a javascript value.
To access the button via its id attribute, you need to use getElementById
Alternatively you can give the input a name attribute, and access it via the form elements collection.
But the code has worked fine on the other pages if I do the following. The value shows up in the “runtime” field without using get element by id:
function formFuel(form) {
var a = form.elements.tank.value,
b = form.elements.driveMinutes.value,
c = form.elements.driveSeconds.value,
d = form.elements.consumed.value,
var used = a - d;
var secs = b * 60;
var secstotal = secs + c;
var secsPerCC = secstotal / used;
var runtime2 = secsPerCC * a;
form.elements.ans.value = secsPerCC / 60;
}
runtime.onclick = function () {
var form = document.getElementById('form1');
formFuel(form);
}
There must be another reason why it’s not working.
Other issues are with how the variables are declared.
Commonly variables should be declared as one declaration, separated by commas.
var foo = 'foo',
bar = 'bar',
baz = 'baz';
Thanks. I wrapped my lines with single quotes and got back the variable name instead of the variable itself. I’m supposed to wrap only actual digits in single quotes, right?
Also, how do you concatenate this properly:
time = minutes +“:”+ seconds // should return “7:30”
where minutes and seconds have already been declared earlier?
That wasn’t the problem I was conveying. The problem was that you used a comma at the end of the variable declarations, which confuses javascript into expecting another declaration that wasn’t there.
Apart from a missing semicolon at the end of the statement, that looks to be fine.
OK, I converted all semicolons to commas for all var declarations, with the last declaration ending in a semi-colon just before this line:
form.elements.ans.value = secsPerCC / 60;
I also added:
var runtime = document.getElementById(‘runtime’);
just above the line:
runtime.onclick = function () {
This is what I have now. With these revisions, no results make it into the two fields:
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr><td class="alignright"><form id="form1">
Tank capacity, cc's: <input class="display" type="number" size="4" value="" name="tank">
</td></tr>
<tr><td class="alignright">Drive time, minutes: <input class="display" type="number" size="4" value="" name="driveMinutes"><br>
<br>Drive time, seconds: <input class="display" type="number" size="4" value="0" name="driveSeconds">
</td></tr>
<tr><td class="alignright">
Fuel remaining, cc's: <input class="display" type="number" size="4" value="" name="consumed">
</td></tr>
<tr><td class="alignright">
<input id="runtime" name="runtime" class="buttPress2" type="button" value="Runtime ">
<input class="display2" size="4" type="number" value="" name="ans">
</td></tr>
</form></table>
<br>
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr><td class="alignright"><form id="form2">
Main length (minutes): <input class="display" type="number" size="4" value="" name="LENGTH">
</td></tr>
<tr><td class="alignright">
Number of pit stops: <input class="display" type="number" size="4" value="" name="STOPS">
</td></tr>
<tr><td class="alignright">
<input id="resultPitStops" name="resultPitStops" class="buttPress2" type="button" value="Pit Intervals ">
<input id="Between" class="display2" size="4" type="number" value="" name="between">
</td></tr>
</form></table>
<SCRIPT LANGUAGE="JavaScript">
function formFuel(form) {
var a = form.elements.tank.value,
b = form.elements.driveMinutes.value,
c = form.elements.driveSeconds.value,
d = form.elements.consumed.value,
used = (a - d), <!-- get the amount of fuel used -->
secs = (b * '60'), <!-- convert minutes into seconds -->
secstotal = (secs + c), <!-- add minutes and seconds to get total seconds -->
secsPerCC = (secstotal / used), <!-- divide the number of seconds into the used fuel amount for secs per cc -->
var seconds = (secsPerCC % '60'), <!-- use modulus operator to get the remainder and convert into seconds figure -->
var minutes = math.floor(secsPerCC / '60'), <!-- get the minute figure as a digit -->
var runtime2 = minutes +":"+seconds, <!-- concatenate everything into minutes and seconds -->
runtime2 = (secsPerCC * a); <!-- get the amount of run time -->
form.elements.ans.value = runtime2;
}
function heatpit(form) {
var e = form.elements.LENGTH.value, <!-- put LENGTH field value into variable e -->
f = form.elements.STOPS.value, <!-- put STOPS field value into variable f -->
secs2 = (e * '60'), <!-- convert the minutes into seconds -->
periods = (f + '1'), <!-- add 1 to the pit stop number get the total number of divisions throughout the period -->
result2 = (secs2 / periods), <!-- divide the full time by the number of periods -->
seconds = (result2 % '60'), <!-- use modulus operator to get the remainder and convert into seconds figure -->
minutes = math.floor(result2 / '60'), <!-- get the minute figure as a digit -->
time = minutes +":"+seconds; <!-- concatenate everything into minutes and seconds -->
form.elements.between.value = minutes; <!-- display in the "between" field s/b "time" value -->
}
var runtime = document.getElementById('runtime');
runtime.onclick = function () {
var form = document.getElementById('form1');
formFuel(form);
}
var resultPitStops = document.getElementById('resultPitStops');
resultPitStops.onclick = function () {
var form = document.getElementById('form2');
heatpit(form);
}
</SCRIPT>
You still have several var problems.
I went to w3schools.com for Javascript variables and each line of their list of variables end in a semi-colon, and there are no single-quotes around their digits. They are using double-quotes around strings.
That helps to explain some things.
You may want to have a good read of the problems that w3schools has, over at w3schools - an intervention
I’ve never visited the site before now. I just chose it from a list of results in Google. Thanks for the heads-up!
I need to remove “var” in front of several variables.
The most correct way is to use one var with comma-separated variable assignments.
var foo = 'foo',
bar = 'bar',
baz = 'baz';
You can use separate var statements, but that then becomes tempting to use throughout different parts of your code, which is to be avoided.
var foo = 'foo';
var bar = 'bar';
var baz = 'baz';
What is not allowed though, is to end one var statement with a comma, and to then start another var statement.
var foo = 'foo', // error, since another variable assignment is expected here
var bar = 'bar';
var baz = 'baz';
In terms of syntax, it doesn’t matter whether single or double-quotes are used. However, since HTML commonly uses double-quotes for its attributes, it has become a standard practice to use single-quotes for javascript strings.
Whichever way you decide to use, just be consistent with it. If possible, pick a set of code conventions and stick with them. There are many [url=“http://www.martinrinehart.com/articles/javascript-conventions.html”]different code conventions, but many of them tend to converge to the same fundamental ideas.
Thanks! Regarding Post #12, I removed the vars that followed commas. But it still doesn’t work.
Submit your code in this javascript lint page, and it will show you the most obvious problem that need to be fixed in your code.
If you want your code to be fully without problems, there’s a much harsher jslint process, but it’s well worth it, especially with “the good parts” enabled.