We Keep Coding

It is possible to add an integer input with a time type input and result to a time type input?

As I mention in the title I have three input in HTML:
<input type="number" name="time" id="time">
<input type="time" name="hour_start" id="hour_start">
<input type="time" name="hour_final" id="hour_final">
and JS:
<script>
$("#time").change(function () {
var time = $('#time').val();
var start = $('#hour_start').val();
var convert = Math.floor(time/60);
var final = start + convert;
$('#hour_final').val(final);
});
</script>
The calculation is done without using a button.
Enter image description here

Javascript answser ( as you asking) :
const myForm = document.querySelector('#my-Form')
, z2 = v=>('00'+v).slice(-2) // like padStart(2.'0')
myForm.time.oninput=_=>
{
let inDate = myForm.hour_start.valueAsDate
, h_UTC = inDate.getUTCHours()
, m_UTC = inDate.getUTCMinutes()
, nTim = (h_UTC * 60) + m_UTC + myForm.time.valueAsNumber
h_UTC = Math.trunc(nTim/60) % 24
m_UTC = nTim % 60
inDate.setUTCHours(h_UTC)
inDate.setUTCMinutes(m_UTC)
myForm.hour_final.valueAsDate = inDate
}
myForm.onsubmit=e=>
{
e.prventdefault() // just for test
}
<form action="xxx" id="my-Form">
<input type="number" name="time" value="0" min="0" max="2000">
<input type="time" name="hour_start" value="13:30">
<input type="time" name="hour_final" value="13:30">
</form>

How to calculating time difference

I'm trying to make a program where i put in to different times and get the difference in minute after clicking the "calculate" button. I'm not sure if my approach is correct, there may be some typo's.
I'v tried to make the different input values to number but it seems like there is another underlying problem which I can't see.
var hour1=document.getElementById("hour1");
var min1=document.getElementById("min1");
var hour2=document.getElementById("hour2");
var min2=document.getElementById("min2");
function calc(){
var minutt1=Number(hour1)*60+Number(min1);
var minutt2=Number(hour2)*60+Number(min2);
var resultat=0;
resultat = Number(minutt1) - Number(minutt2);
document.getElementById("result").innerHTML="Time differance is:" + Number(resultat);
}
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min1">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>
I expect getting a number which represents the time difference in minutes, but the actual output is "NaN".

You need to get the value of hour1, min1, hour2, and min2. You also don't have an element min2:
var hour1=document.getElementById("hour1").value;
var min1=document.getElementById("min1").value;
var hour2=document.getElementById("hour2").value;
var min2=document.getElementById("min2").value;
What your code was trying to do was multiply and subtract HTML elements (never a good idea).
var hour1 = document.getElementById("hour1").value;
var min1 = document.getElementById("min1").value;
var hour2 = document.getElementById("hour2").value;
var min2 = document.getElementById("min2").value;
function calc() {
var minutt1 = Number(hour1) * 60 + Number(min1);
var minutt2 = Number(hour2) * 60 + Number(min2);
var resultat = 0;
resultat = Number(minutt1) - Number(minutt2);
document.getElementById("result").innerHTML = "Time differance is:" + Number(resultat);
}
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min2">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>

Other answers are close, but you need to get the value of the inputs after you click the button
var hour1 = document.getElementById("hour1");
var min1 = document.getElementById("min1");
var hour2 = document.getElementById("hour2");
var min2 = document.getElementById("min2");
window.calc = function () {
var minutt1 = parseInt(hour1.value) * 60 + parseInt(min1.value);
var minutt2 = parseInt(hour2.value) * 60 + parseInt(min2.value);
var resultat = minutt1 - minutt2;
document.getElementById("result").innerHTML = "Time differance is:" + resultat;
console.log({minutt1:minutt1,minutt2:minutt2,resultat:resultat,
hour1:hour1,min1:min1,
hour2:hour2,min2:min2
})
};
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min2">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>

Nn algorithm that divides a single number three times Javascript

I'm trying to create an algorithm that divides a single number three times.
I've created this code, but it for some reason it doesn't work and I've got no clue why.
Could some one give me insight into what i'm doing wrong?
HTML
<form id="frm1">
Budget: <input id="budget" type="text" name="budget" value="110"><br>
<br>
Domestic:
<input id="low" type="text" name="low" value="20">%<br>
<input id="lowresult" type="text" name="low" oninput="calculate()"><br>
Continental:
<input id="med" type="text" name="med" value="30">% <br>
<input id="medresult" type="text" name="med" oninput="calculate()"><br>
International:
<input id="high" type="text" name="high" value="50">% <br>
<input id="highresult" type="text" name="high" oninput="calculate()"><br>
<br>
</form>
Javascript
function calculate() {
var budget = document.getElementById("budget").value;
var low = document.getElementById('low').value;
var med = document.getElementById('med').value;
var high = document.getElementById('high').value;
var lowResult = document.getElementById('lowresult');
var medResult = document.getElementById('medresult');
var highResult = document.getElementById('highresult');
var lowFinalResult = (budget /100)*low;
lowResult.value = lowResult;
var medFinalResult = (budget /100)*med;
medResult.value = medResult;
var highFinalResult = (budget /100)*high;
highResult.value = highResult;
}

adjust javascript
this
var lowFinalResult = (budget /100)*low;
lowResult.value = lowFinalResult;
insetad of
var lowFinalResult = (budget /100)*low;
lowResult.value = lowResult;
full code
function calculate() {
var budget = document.getElementById("budget").value;
var low = document.getElementById('low').value;
var med = document.getElementById('med').value;
var high = document.getElementById('high').value;
var lowResult = document.getElementById('lowresult');
var medResult = document.getElementById('medresult');
var highResult = document.getElementById('highresult');
var lowFinalResult = (budget /100)*low;
lowResult.value = lowFinalResult;
var medFinalResult = (budget /100)*med;
medResult.value = medFinalResult;
var highFinalResult = (budget /100)*high;
highResult.value = highFinalResult;
}

You wrote in the comment that you're "trying to input one amount into the 'budget' input". So I'd like to add that you do that calculate() in the budget input:
<form id="frm1">
Budget: <input id="budget" type="text" name="budget"
value="110" oninput="calculate()"><br>
So the oninput attribute of the other inputs can be removed.

NaN error on form submission [duplicate]

This question already has answers here:
Reading numbers from inputs with JavaScript always returns NaN
(8 answers)
Closed 7 years ago.
I'm attempting to write a simple JavaScript program that calculates the cost of gas based on some parameters from a form. Upon form submission, I get a NaN error inside of the "calculatedMonthlyCost" div.
Can anybody tell me what I'm doing wrong? Is there a better way of doing this?
<form>
Cost of Gas: <input type="text" placeholder="ex: 3.10" name="costOfGas"/>
<br>
Vehicle MPG: <input type="text" placeholder="ex: 30" name="vehicleMPG"/>
<br>
How many miles do you drive to work (one-way): <input type="text" placeholder="ex: 10" name="numMiles"/>
<br>
<input type="submit" value="Submit">
<br>
</form>
<div id="calculatedMonthlyCost"></div>
<script>
var calcCost = function (costOfGas, vehicleMPG, numMiles) {
var dailyCost = (costOfGas / vehicleMPG) * (numMiles * 2);
var weeklyCost = dailyCost * 5;
var monthlyCost = weeklyCost * 4;
return {
dailyCost: dailyCost,
weeklyCost: weeklyCost,
monthlyCost: monthlyCost
};
}
var userCostOfGas = document.forms[0].costOfGas.value;
var userMPG = document.forms[0].vehicleMPG.value;
var userNumMiles = document.forms[0].numMiles.value;
document.forms[0].onsubmit = function(e) {
e.preventDefault();
var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
calculatedMonthlyCost.innerHTML = costs.weeklyCost;
};
</script>

You were getting the values on page load (when they were empty). You just need to get the values inside the onsubmit event listener, and to convert them to Numbers.
var calcCost = function (costOfGas, vehicleMPG, numMiles) {
var dailyCost = (costOfGas / vehicleMPG) * (numMiles * 2);
var weeklyCost = dailyCost * 5;
var monthlyCost = weeklyCost * 4;
return {
dailyCost: dailyCost,
weeklyCost: weeklyCost,
monthlyCost: monthlyCost
};
}
document.forms[0].onsubmit = function(e) {
e.preventDefault();
var userCostOfGas = +document.forms[0].costOfGas.value; // < Move these lines here and
var userMPG = +document.forms[0].vehicleMPG.value; // < add a plus sign before them
var userNumMiles = +document.forms[0].numMiles.value; // <
var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
calculatedMonthlyCost.innerHTML = costs.weeklyCost;
};
<form>
Cost of Gas: <input type="text" placeholder="ex: 3.10" name="costOfGas"/>
<br>
Vehicle MPG: <input type="text" placeholder="ex: 30" name="vehicleMPG"/>
<br>
How many miles do you drive to work (one-way): <input type="text" placeholder="ex: 10" name="numMiles"/>
<br>
<input type="submit" value="Submit">
<br>
</form>
<div id="calculatedMonthlyCost"></div>
If you only want 2 decimals, you can change this line:
calculatedMonthlyCost.innerHTML = (costs.weeklyCost).toFixed(2);
Demo:
var calcCost = function (costOfGas, vehicleMPG, numMiles) {
var dailyCost = (costOfGas / vehicleMPG) * (numMiles * 2);
var weeklyCost = dailyCost * 5;
var monthlyCost = weeklyCost * 4;
return {
dailyCost: dailyCost,
weeklyCost: weeklyCost,
monthlyCost: monthlyCost
};
}
document.forms[0].onsubmit = function(e) {
e.preventDefault();
var userCostOfGas = +document.forms[0].costOfGas.value; // < Move these lines here and
var userMPG = +document.forms[0].vehicleMPG.value; // < add a plus sign before them
var userNumMiles = +document.forms[0].numMiles.value; // <
var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
calculatedMonthlyCost.innerHTML = (costs.weeklyCost).toFixed(2);
};
<form>
Cost of Gas: <input type="text" placeholder="ex: 3.10" name="costOfGas"/>
<br>
Vehicle MPG: <input type="text" placeholder="ex: 30" name="vehicleMPG"/>
<br>
How many miles do you drive to work (one-way): <input type="text" placeholder="ex: 10" name="numMiles"/>
<br>
<input type="submit" value="Submit">
<br>
</form>
<div id="calculatedMonthlyCost"></div>

You save the value of your inputs before the onsubmit method is called. This actually saves a blank value since the variables are set before the user inputs a value and it's not dynamic. The values need to be checked on submit.
document.forms[0].onsubmit = function(e) {
var userCostOfGas = parseInt(document.forms[0].costOfGas.value,10);
var userMPG = parseInt(document.forms[0].vehicleMPG.value,10);
var userNumMiles = parseInt(document.forms[0].numMiles.value,10);
e.preventDefault();
var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
calculatedMonthlyCost.innerHTML = costs.weeklyCost;
};

Generate all results in one button click - Javascript

Just to start let me just say in not good at Javascript.
I am developing a simple ROI calculator where when someone enter the number of devices for his network support company it will show the user his current cost and the cost that we provide the service for. The problem is that when i press generate cost all the information do not get generated all at once. I have to click the "Generate cost" button twice more to get all the result.
I have to click the "Generate cost" button twice more to get the result for our cost and our saving.
I just want to know how i can make sure that when i click the button all the text boxes gets populated rather than me clicking twice more to generate the rest of the results.
I have generated the file here : http://codepen.io/anon/pen/PwpePX
HTML
<h1 style="font-size:40px;text-align:center;">ROI Calculator</h1>
<br/>
<div style="float:left;">
<h1>Your Cost</h1>
Total no. of managed servers
<input type="roi_text" id="value1" name="value1" value="" />
<br/>Total no. of network devices
<input type="roi_text" id="value2" name="value2" value="" />
<br/>Total no. of workstations
<input type="roi_text" id="value3" name="value3" value="" />
<br/>No of service desk users
<input type="roi_text" id="value4" name="value4" value="" />
<br/>How many engineers do you have?
<input type="roi_text" id="value5" name="value5" value="" />
<br/>Average salary of your engineers*
<input type="roi_text" id="value6" name="value6" value="" />
<br/>Average on-call allowance per month?
<input type="roi_text" id="value7" name="value7" value="" />
<br/>
<br/>Your Current Cost
<input type="roi_text" id="answer" name="answer" value="" disabled="disabled" />
</div>
<div style="float:left;">
<h1>Our Cost</h1>
NOC =
<input type="roi_text" id="answer1" name="answer1" value="" disabled="disabled" />
<br/>Out of Hour NOC =
<input type="roi_text" id="answer2" name="answer2" value="" disabled="disabled" />
<br/>24/7 Service desk =
<input type="roi_text" id="answer3" name="answer3" value="" disabled="disabled" />
<br/>Out of Hours SD =
<input type="roi_text" id="answer4" name="answer4" value="" disabled="disabled" />
<br/>Our cost =
<input type="roi_text" id="answer5" name="answer5" value="" />
<br/>
<br/>
<br/>Total Savings =
<input type="roi_text" id="answer7" name="answer7" value="" />
<input type="button" name="Sumbit" value="GENERATE COST" onclick="javascript:addNumbers();" />
JAVASCRIPT
function addNumbers() {
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var val3 = parseInt(document.getElementById("value3").value);
var val4 = parseInt(document.getElementById("value4").value);
var val5 = parseInt(document.getElementById("value5").value);
var val6 = parseInt(document.getElementById("value6").value);
var val7 = parseInt(document.getElementById("value7").value);
var noc1 = parseInt(document.getElementById("answer1").value);
var oohnoc1 = parseInt(document.getElementById("answer2").value);
var sd1 = parseInt(document.getElementById("answer3").value);
var oohsd1 = parseInt(document.getElementById("answer4").value);
var ansD1 = parseInt(document.getElementById("answer").value);
var inbaycost1 = parseInt(document.getElementById("answer5").value);
var ansD = document.getElementById("answer");
ansD.value = (val5 * val6 + val7 * 12);
var noc = document.getElementById("answer1");
noc.value = ((val1 * 25 + val2 * 10 + val3 * 5) * 12);
var oohnoc = document.getElementById("answer2");
oohnoc.value = ((val1 * 15 + val2 * 5 + val3 * 3.5) * 12);
var sd = document.getElementById("answer3");
sd.value = ((val4 * 15) * 12);
var oohsd = document.getElementById("answer4");
oohsd.value = ((val4 * 10) * 12);
var inbaycost = document.getElementById("answer5");
inbaycost.value = (noc1 + oohnoc1 + sd1 + oohsd1);
var totalsaving = document.getElementById("answer7");
totalsaving.value = (ansD1 - inbaycost1); }
Will appericiate any help to sort this issue.
Many thanks

You are making in wrong order.
Example: you take te value of "answer4"
var oohsd1 = parseInt(document.getElementById("answer4").value);
then calculate its value
var oohsd = document.getElementById("answer4");
oohsd.value = ((val4 * 10) * 12);
This is how it works
function addNumbers() {
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var val3 = parseInt(document.getElementById("value3").value);
var val4 = parseInt(document.getElementById("value4").value);
var val5 = parseInt(document.getElementById("value5").value);
var val6 = parseInt(document.getElementById("value6").value);
var val7 = parseInt(document.getElementById("value7").value);
var noc = document.getElementById("answer1");
noc.value = ((val1 * 25 + val2 * 10 + val3 * 5) * 12);
var noc1 = parseInt(document.getElementById("answer1").value);
var oohnoc = document.getElementById("answer2");
oohnoc.value = ((val1 * 15 + val2 * 5 + val3 * 3.5) * 12);
var oohnoc1 = parseInt(document.getElementById("answer2").value) ;
var sd = document.getElementById("answer3");
sd.value = ((val4 * 15) * 12);
var oohsd = document.getElementById("answer4");
oohsd.value = ((val4 * 10) * 12);
var oohsd1 = parseInt(document.getElementById("answer4").value);
var sd1 = parseInt(document.getElementById("answer3").value);
var inbaycost = document.getElementById("answer5");
inbaycost.value = (noc1 + oohnoc1 + sd1 + oohsd1);
var ansD = document.getElementById("answer");
ansD.value = (val5 * val6 + val7 * 12);
var ansD1 = parseInt(document.getElementById("answer").value);
var inbaycost1 = parseInt(document.getElementById("answer5").value);
var totalsaving = document.getElementById("answer7");
totalsaving.value = (ansD1 - inbaycost1);
}
Link: http://codepen.io/anon/pen/xbqjXpv