I input the values, and it works ONCE, which is a problem.
I try to change the numbers, and click Enter again, and it does nothing.
The only way it works again is if I use the scroll to up or down the current value.
var fuel = 2.5;
var mpg = 6;
function Hourly() {
var miles = document.getElementById('miles').value;
var brokerPay = document.getElementById('pay').value;
var gallons = miles / 6;
var hours = miles / 55;
var cost = gallons * fuel;
var net = brokerPay - cost
var hourlyPay = net / hours;
var newHeader = document.getElementById('changeMe');
newHeader.innerHTML = hourlyPay;
}
<h1 id="changeMe">Change me Here</h1>
<input type="number" placeholder="miles" id="miles" required/>
<input type="number" placeholder="Broker Pay" id="pay" required/>
<input type="submit" value="Enter" onclick="Hourly()" />
Related
Hi I'm very novice at Javascript so apologies for asking naff questions.
This piece of code is returning a Nan when it should retrieve days elapsed.
Is the second function causing the issue?
Here it is:
<body>
<script>
function elapsedTime(date1, date2) {
var start = new Date(date1);
var startMilli = start.getTime();
var end = new Date(date2);
var endMilli = end.getTime();
var elapsed = (endMilli - startMilli);
alert(millisToDaysHoursMinutes(elapsed));
}
function millisToDaysHoursMinutes(millis) {
var seconds = millis / 1000;
var totalMinutes = seconds / 60;
var minutesPerDay = 60 * 24;
var days = totalMinutes / minutesPerDay;
return days;
}
</script>
<form>
Start:<input type="text" name="date1" value="dd/m/year" /><br>
End: <input type="text" name="date2" value="dd/m/year" />
<input type="button" name="button1" onclick="elapsedTime(date1.value, date2.value)" value="Get Elapsed Time" />
</form>
</body>
You need to ensure that the dates entered are valid else you'll get a NaN (Not a Number). Use input type=date and make them required then you can easily check that they're valid before calling your date diff function.
EG:
function elapsedTime(date1, date2) {
var start = new Date(date1);
var startMilli = start.getTime();
var end = new Date(date2);
var endMilli = end.getTime();
var elapsed = (endMilli - startMilli);
alert(millisToDaysHoursMinutes(elapsed));
}
function millisToDaysHoursMinutes(millis) {
var seconds = millis / 1000;
var totalMinutes = seconds / 60;
var minutesPerDay = 60 * 24;
var days = totalMinutes / minutesPerDay;
return days;
}
var date1 = document.querySelector("input[name=date1]"),
date2 = document.querySelector("input[name=date2]"),
button1 = document.querySelector("input[name=button1]");
button1.addEventListener("click", function() {
var date1valid = date1.checkValidity();
var date2valid = date2.checkValidity();
if (date1valid && date2valid) {
elapsedTime(date1.value, date2.value);
} else {
alert("Please provide both dates!");
}
});
<form>
Start:<input type="date" name="date1" required="required" value="dd/m/year" /><br> End: <input type="date" name="date2" required="required" value="dd/m/year" />
<input type="button" name="button1" value="Get Elapsed Time" />
</form>
You should use input type date to make your code work:
<form>
Start:<input type="date" name="date1" /><br>
End: <input type="date" name="date2" />
<input type="button" name="button1" onclick="elapsedTime(date1.value, date2.value)" value="Get Elapsed Time" />
</form>
I'm a JavaScript noob and beginner so don't get too hard on me.
I need to calculate the volume of a cylinder using a constructor function and prototype.
I've got a form with two inputs which I'll be getting the values from to do the calculation with. I have to create a new instance when the button is clicked and the calculation has to be outputted in the outcome input.
I seem to be stuck at the part to get the values out of the inputs as my console always says that 'hoogte' and 'diameter' is undefined when I click the button.
I've been looking at this for almost 24h now, but I'm not getting any progress..
This is my code:
<form action="">
<label>
Diameter: <input type="text" id="diameter"><br><br>
Hoogte: <input type="text" id="hoogte"> <br><br>
<input type="button" value="bereken" id="berekenBtn"><br><br>
<input type="text" id="uitkomst">
</label>
</form>
<script>
window.addEventListener("DOMContentLoaded", function () {
document.getElementById("berekenBtn").addEventListener("click", bereken);
});
function Cylinder(hoogte, diameter) {
this.hoogte = hoogte;
this.diameter = diameter;
}
Cylinder.prototype.volume = function () {
var radius = document.getElementById('diameter') = this.diameter / 2;
var hoogte = document.getElementById('hoogte') = this.hoogte;
var berekening = Math.PI * radius * radius * hoogte;
//berekening.toFixed(4);
}
function bereken() {
var myCylinder = new Cylinder(
document.getElementById("uitkomst").value = Cylinder()
)
console.log(myCylinder);
}
</script>
<form action="">
<label>
Diameter: <input type="number" id="diameter"><br><br>
Hoogte: <input type="number" id="hoogte"> <br><br>
<input type="button" value="bereken" id="berekenBtn"><br><br>
<input type="text" id="uitkomst">
</label>
</form>
<script>
window.addEventListener("DOMContentLoaded", function () {
document.getElementById("berekenBtn").addEventListener("click", bereken);
});
function Cylinder(hoogte, diameter) {
this.hoogte = hoogte;
this.diameter = diameter;
}
Cylinder.prototype.volume = function () {
var radius = this.diameter / 2;
var hoogte = this.hoogte;
var berekening = Math.PI * radius * radius * hoogte;
return berekening;
}
function bereken() {
var diameter = document.getElementById("diameter").value;
var hoogte = document.getElementById("hoogte").value;
var myCylinder = new Cylinder(diameter, hoogte);
var result = myCylinder.volume();
document.getElementById("uitkomst").value = result;
}
</script>
I have modified some code, try to understand this, hope it will helps you !
var $ = function(id) {
return document.getElementById(id);
};
// var future_value;
var calculateFV = function (investment, interest, years) {
var future_value = investment;
for (var i = 1; i <= years; i++) {
future_value = future_value + (future_value * interest / 100);
}
future_value = future_value.toFixed(2);
return future_value;
//$("future_value").value = calculateFV(investment, interest, years);
};
var processEntries = function () {
var investment = parseFloat($("investment").value);
var interest = parseFloat($("interest").value);
var years = parseFloat($("years").value);
$("future_value").value = calculateFV(investment, interest, years);
};
window.onload = function () {
$("calculate").onclick = processEntries;
};
I think the problem is with the for loop but I don't know, I've tried everything at this point. Nothing will run, maybe you guys can spot the bug?
<label for="investment">Total Investment:</label>
<input type="text" id="investment">
<span id="investment_error"> </span><br>
<label for="rate">Annual Interest Rate:</label>
<input type="text" id="annual_rate">
<span id="rate_error"> </span><br>
<label for="years">Number of Years:</label>
<input type="text" id="years">
<span id="years_error"> </span><br>
<label for="future_value">Future Value:</label>
<input type="text" id="future_value" disabled><br>
<label> </label>
<input type="button" id="calculate" value="Calculate"><br>
Thinking now that it's something to do in my HTML?
Your code should work with one minor correction, $("interest").value should be $("annual_rate").value to work with your HTML:
The only thing I would change is to remove the disabled property on the future_value input. With the diasbled attribute on, the value will not be submitted. You can use readonly to prevent users from modifying the field. However you should double check the calculations on the back end in any case.
var $ = function(id) {
return document.getElementById(id);
};
// var future_value;
var calculateFV = function(investment, interest, years) {
var future_value = investment;
for (var i = 1; i <= years; i++) {
future_value = future_value + (future_value * interest / 100);
}
future_value = future_value.toFixed(2);
return future_value;
//$("future_value").value = calculateFV(investment, interest, years);
};
var processEntries = function() {
var investment = parseFloat($("investment").value);
var interest = parseFloat($("annual_rate").value);
var years = parseFloat($("years").value);
$("future_value").value = calculateFV(investment, interest, years);
};
window.onload = function() {
$("calculate").onclick = processEntries;
};
<label for="investment">Total Investment:</label>
<input type="text" id="investment">
<span id="investment_error"> </span><br>
<label for="rate">Annual Interest Rate:</label>
<input type="text" id="annual_rate">
<span id="rate_error"> </span><br>
<label for="years">Number of Years:</label>
<input type="text" id="years">
<span id="years_error"> </span><br>
<label for="future_value">Future Value:</label>
<input type="text" id="future_value" readonly><br>
<label> </label>
<input type="button" id="calculate" value="Calculate"><br>
Works fine. No problem.
var $ = function(id) {
return document.getElementById(id);
};
//var future_value;
var calculateFV = function(investment, interest, years) {
var future_value = investment;
for (var i = 1; i <= years; i++) {
future_value = future_value + (future_value * interest / 100);
}
future_value = future_value.toFixed(2);
return future_value;
//$("future_value").value = calculateFV(investment, interest, years);
};
var processEntries = function() {
var investment = parseFloat($("investment").value);
var interest = parseFloat($("interest").value);
var years = parseFloat($("years").value);
$("future_value").value = calculateFV(investment, interest, years);
};
window.onload = function() {
$("calculate").onclick = processEntries;
};
investment: <input id="investment" type="text" value="1000"><br/>
interest: <input id="interest" type="text" value="8"><br/>
years: <input id="years" type="text" value="2"><br/>
future_value: <input id="future_value" type="text" value="" disabled><br/>
<input type="button" id="calculate" value="Calculate">
Good Day - I am Learning Javascript, I am trying to create a Calculator to calculate ampere-turn to magnetize a tool (it's related to my job.) I am trying to use some formulas to calculate this ampere-turn. The code seems fine to me, but it's not working. I put some values in the form, and click button submit, but no result found and i don't know why this happens.
I am sharing my code here for your kind review. and help me to fix this problem.
thank you.
function ampereturn()
{
var inputOD = Number(document.ampereturn.inputod.value);
var inputLen = Number(document.ampereturn.inputlen.value);
var InputID = Number(document.ampereturn.Inputid.value);
var InputTurn = Number(document.ampereturn.Inputturn.value);
var ans;
var ldratio = inputLen/inputOD;
var coilradius = InputID/2;
var toolradius = inputOD/2;
var pi = 3.14;
var xcoil = (coilradius * coilradius) * pi;
var xtool = (toolradius * toolradius) * pi;
var factor = xtool/xcoil;
var text = "Use Intermediate Fill-factor formula:";
if(factor >= 0.5)
{
ans = 35000/(ldratio+2)*Inputturn;
document.getElementById('sum').innerHTML = ans;
}
if(factor <= 0.1)
{
ans = 45000/ldratio*Inputturn;
document.getElementById('sum').innerHTML = ans;
}
else
{
document.getElementById('sum').innerHTML = text;
}
}
<form name="ampereturn">
<div class="w3-half w3-margin-top">
<label>Tool OD:</label>
<input id="inputod" class="w3-input w3-border" type="number" placeholder="Input Tool Outer Dia:">
</div>
<div class="w3-half w3-margin-top">
<label>Tool Lenght:</label>
<input id="inputlen" class="w3-input w3-border" type="number" placeholder="Input Tool Length">
</div>
<div class="w3-half w3-margin-top">
<label>Coil ID:</label>
<input id="Inputid" class="w3-input w3-border" type="number" placeholder="Input Coil Internal Dia:">
</div>
<div class="w3-half w3-margin-top">
<label>Coil Turn:</label>
<input id="Inputturn" class="w3-input w3-border" type="number" placeholder="Input Number of turn in coil:">
</div>
<div class="w3-half w3-margin-top">
<label>Required Ampere:</label>
<p id="sum"></p>
</div>
<button type="button" onclick="ampereturn()">Submit</button>
</form>
<br><hr>
thank you in advance. ....
Change the function name which is same as the form name.
Change Inputturn to InputTurn in the if condition.
Required Code:
function Ampereturn()
{
var inputOD = Number(document.ampereturn.inputod.value);
var inputLen = Number(document.ampereturn.inputlen.value);
var InputID = Number(document.ampereturn.Inputid.value);
var InputTurn = Number(document.ampereturn.Inputturn.value);
var ans;
var ldratio = inputLen/inputOD;
var coilradius = InputID/2;
var toolradius = inputOD/2;
var pi = 3.14;
var xcoil = (coilradius * coilradius) * pi;
var xtool = (toolradius * toolradius) * pi;
var factor = xtool/xcoil;
var text = "Use Intermediate Fill-factor formula:";
if(factor >= 0.5)
{
ans = 35000/(ldratio+2)*InputTurn;
document.getElementById('sum').innerHTML = ans;
}
else if(factor <=0.1)
{
ans = 45000/ldratio*InputTurn;
document.getElementById('sum').innerHTML = ans;
}
else
{
document.getElementById('sum').innerHTML = text;
}
}
I have two textbox's. Textbox one has the remaining hp that it gets from a variable. Textbox two has a button that when you click it, it runs dmgNPC and subtracts the damage that you enter into the textbox from the hp text box.
The question i have is how do i get JS to subtract from the new value that it shown in the remaining hp textbox?
var hp = 10;
function dmgNPC(hp) {
var damage = document.getElementById("damage").value;
var theDMG = hp - damage;
return document.getElementById("remaining").value = theDMG;
}
<label for="damage">Damage to NPC</label>
<input type="text" id="damage">
<button type="button" onclick="dmgNPC(hp);">Enter Damage</button>
<br/>
<label for="remaining">Remaining Health</label>
<input type="text" id="remaining">
I think you want something like this
var hp = 10;
function dmgNPC() {
var damage = document.getElementById("damage").value;
hp -= damage;
document.getElementById("remaining").value = hp;
}
<label for="damage">Damage to NPC</label>
<input type="text" id="damage">
<button type="button" onclick="dmgNPC();">Enter Damage</button>
<br/>
<label for="remaining">Remaining Health</label>
<input type="text" id="remaining">
Geoffrey let me see if I understand this. You want to subtract from 10 at the beginning but after that take from the remaining value so you can work your way down to 0 health? If so here is the JS I wrote for that.
var hp = 10;
function dmgNPC(hp) {
if(document.getElementById("remaining").value){
var damage = document.getElementById("damage").value;
var theDMG = document.getElementById("remaining").value - damage;
}else{
var damage = document.getElementById("damage").value;
var theDMG = hp - damage;
}
document.getElementById("remaining").value = theDMG;
}