How to use "i" from loop? after loop is already stop - javascript

I'm trying to make a projectile calculator, so it really need to change the way to calculate again & again until it is done.
<script>
function useif()
{
var Height = Number(document.getElementById("Height").value);
var Velocity = Number(document.getElementById("Velocity").value);
var Range = Number(document.getElementById("Range").value);
var First = ( ( ((Math.SQRT2 * Velocity) + (Math.sqrt(19.6) * Velocity * Height)) * Math.cos(0.785398163) ) / 9.8);
document.getElementById("First").innerHTML = First;
if (First < Range)
document.getElementById("show").innerHTML = "Need more velocity to success on this range";
else
{
for (var i = -1.570796327; i < MaxValue; i+0.000000001;)
{
( (( (Velocity * Math.sin(i)) + Math.sqrt(Velocity * Math.sin(i) * Velocity * Math.sin(i) - 19.6 * Height) )) / 9.8) * Velocity * Math.cos(i));
if (result >= Range) break;
document.getElementById("i").innerHTML = i;
var degree = i * 57.295779513;
document.getElementById("show").innerHTML = degree + "degree";
}
}
}
This is all of the function
<p>Height<br /><input id="Height" type="text" /><br></P>
<p>Range<br /><input id="Range" type="text" /><br></P>
<p>Velocity<br /><input id="Velocity" type="text" /><br></P>
<input type="button" value="Calculate!" onclick="useif()" />
<span id="show"></p>
I'm trying to show "degree" but I don't know why it didn't work
it seems that the problem is comming from the looping part that I'm really new to it and need lots of explanation
This is my JSfiddle just registered it
http://jsfiddle.net/#&togetherjs=1m70MQhEGo

You had a few useless assignments going on all over the place confusing your program and a few variables were missing. After using the "JSHint" button a few times on fiddle I came to this working conclusion. Hope this helps you out bud.
Try this:
HTML:
<p>Height
<br />
<input id="Height" type="text" />
<br>
</P>
<p>Range
<br />
<input id="Range" type="text" />
<br>
</P>
<p>Velocity
<br />
<input id="Velocity" type="text" />
<br>
</P>
<input type="button" value="Calculate!" onclick="useif()" /> <span id="show">Output here</span>
</p>
JS:
window.useif = function () {
var i;
var MaxValue = 3;
var Height = Number(document.getElementById("Height").value);
var Velocity = Number(document.getElementById("Velocity").value);
var Range = Number(document.getElementById("Range").value);
var First = ((((Math.SQRT2 * Velocity) + (Math.sqrt(19.6) * Velocity * Height)) * Math.cos(0.785398163)) / 9.8);
if (First < Range) document.getElementById("show").innerHTML = "Need more velocity to success on this range";
else {
for (i = -1.570796327; i < MaxValue; i += 0.0001) {
result = ((((Velocity * Math.sin(i)) + Math.sqrt(Velocity * Math.sin(i) * Velocity * Math.sin(i) - 19.6 * Height))) / 9.8) * Velocity * Math.cos(i);
if (result >= Range) break;
var degree = i * 57.295779513;
document.getElementById("show").innerHTML = degree + "degree";
}
}
};

Related

Herons formula in javascript and html

I have to find the areas of a triangle using Heron's formula. I wrote this code but it is not calculating the area correctly.
For example I input sideA= 5, sideB= 4, sideC= 3 and the answer is supposed to be 6 but instead I get 72088
Can anybody help me fix this and explain why its happening?
function Triangle(sideA, sideB, sideC) {
this.sideA = sideA;
this.sideB = sideB;
this.sideC = sideC;
this.semiP = ((this.sideA + this.sideB + this.sideC) / 2);
this.area = function() {
return (Math.sqrt(this.semiP * ((this.semiP - this.sideA) * (this.semiP - this.sideB) * (this.semiP - this.sideC))));
}
}
function calculate() {
var sideA = document.getElementById('sideA').value;
var sideB = document.getElementById('sideB').value;
var sideC = document.getElementById('sideC').value;
var myTriangle = new Triangle(sideA, sideB, sideC);
document.getElementById('results').innerHTML = "Area: " + myTriangle.area();
}
<p>
Enter length of side a <input type='text' id="sideA" />
<br>
<br> Enter length of side b <input type='text' id="sideB" />
<br>
<br> Enter length of side c <input type='text' id="sideC" />
<div id="results"></div>
<button type="button" onclick="calculate()">Calculate</button>
The problem that you are having is the sideA, B and C variables are all of type STRINGs and not anything numeric. There are a few different solutions, in my answer I chose to use parseFloat to allow you to have decimal points as input as well as whole numbers.
function Triangle(sideA, sideB, sideC) {
this.sideA = parseFloat(sideA);
this.sideB = parseFloat(sideB);
this.sideC = parseFloat(sideC);
this.semiP = ((this.sideA + this.sideB + this.sideC) / 2);
this.area = function() {
return (Math.sqrt(this.semiP * ((this.semiP - this.sideA) * (this.semiP - this.sideB) * (this.semiP - this.sideC))));
}
}
function calculate() {
var sideA = document.getElementById('sideA').value;
var sideB = document.getElementById('sideB').value;
var sideC = document.getElementById('sideC').value;
var myTriangle = new Triangle(sideA, sideB, sideC);
document.getElementById('results').innerHTML = "Area: " + myTriangle.area();
}
<p>
Enter length of side a <input type='text' id="sideA" />
<br>
<br> Enter length of side b <input type='text' id="sideB" />
<br>
<br> Enter length of side c <input type='text' id="sideC" />
<div id="results"></div>
<button type="button" onclick="calculate()">Calculate</button>

Loop through the sum of the two inputs until in doubled (javascript)

I am stuck here with duch issue. There are 2 two entry boxes are for an amount and an interest rate (%).
If you click on the button, the page will show an overview of the balance until the amount have to be doubled.
Taking a simple numbers forexample 10 - is amount and 4 - is 4% intereste rate. So the result have to stop on amount of 20.
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
for (var i = 1; i <= doubleS; i++) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
}
}
<! DOCTYPE html>
<html>
<body>
<br>
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
<script async src="oefin1.js"></script>
</body>
</html>
The issue is with your for loop bounds.
This will loop doubleX number of times: for (var i = 0; i < doubleX; i++)
This will loop until x surpasses doubleX: for (;x < doubleX;), which btw is better written with a while loop: while (x < doubleX)
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
result.innerHTML = '';
while (s < doubleS) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
}
}
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
Easiest way is to just use a for loop without the convoluted math with s in the middle:
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
for (var i = s; i <= doubleS; i *= ((r / 100) + 1)) {
result.innerHTML += i + "<br>";
}
}
use a while loop and check is the value of s is bigger than or equal to doubleS
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
while(true) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
if(s >= doubleS){
break
}
}
}
<! DOCTYPE html>
<html>
<body>
<br>
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
<script async src="oefin1.js"></script>
</body>
</html>

Why my InnerHTML code won't display any data in the form fields?

I made a simple change calculator. After playing with the code, I managed to make it calculate the values I needed but I can't make it populate my form. If I use alert, the function is right but if I try to use innerHTML to fill the fields, nothing happens. I am really stuck on this one. :(
var quarters;
var dimes;
var nickels;
var pennies;
function Calculate() {
if (cents >= 25) {
quarters = Math.floor(cents / 25);
var qreminder = cents % 25;
if (qreminder <= 24) {
dimes = Math.floor(qreminder / 10);
var dreminder = qreminder % 10;
}
if (dreminder < 10) {
nickels = Math.floor(dreminder / 5);
var nreminder = dreminder % 5;
}
if (nreminder < 5) {
pennies = nreminder / 1;
}
document.getElementById("quarters").innerHTML = quarters;
document.getElementById("dimes").innerHTML = dimes;
document.getElementById("nickels").innerHTML = nickels;
document.getElementById("pennies").innerHTML = pennies;
}
if (cents < 25) {
quarters = Math.floor(cents / 25);
var qreminder = cents % 25;
if (qreminder <= 24) {
dimes = Math.floor(qreminder / 10);
var dreminder = qreminder % 10;
}
if (dreminder < 10) {
nickels = Math.floor(dreminder / 5);
var nreminder = dreminder % 5;
}
if (nreminder < 5) {
pennies = nreminder / 1;
}
document.getElementById("quarters").innerHTML = quarters;
document.getElementById("dimes").innerHTML = dimes;
document.getElementById("nickels").innerHTML = nickels;
document.getElementById("pennies").innerHTML = pennies;
}
}
var cents = document.getElementById("cents").value;
document.getElementById("calculate").addEventListener("click", Calculate);
<div id="content">
<h1>Change Calculator</h1>
<label>Enter number of cents (0-99):</label>
<input type="text" id="cents" />
<input type="button" value="Calculate" name="calculate" id="calculate" /><br />
<p> </p>
<label>Quarters:</label>
<input type="text" id="quarters" class="disabled" disabled="disabled" /><br />
<label>Dimes:</label>
<input type="text" id="dimes" class="disabled" disabled="disabled" /><br />
<label>Nickels:</label>
<input type="text" id="nickels" class="disabled" disabled="disabled" /><br />
<label>Pennies:</label>
<input type="text" id="pennies" class="disabled" disabled="disabled" /><br />
<p> </p>
Setting the .innerHTML property of <input> types will not do anything. Instead, set the .value property of those elements.
document.getElementById("quarters").value = quarters;
document.getElementById("dimes").value = dimes;
document.getElementById("nickels").value = nickels;
document.getElementById("pennies").value = pennies;

RealTime Calculations based on inputs and clicked radio buttons

I want to create a real time calculator for Net-Profit based on the trasaction, of the given quantity at given buy and sell price and it has 2 radio buttons as inputs.
What is happening is, I have to hit enter after putting values and selecting the button.
Where as what I want is, as soon as I input values and select radio button it should calculate the values.
Pl help me correct my code.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Brokerage Calculator</title>
<head>
<script src="jquery-min.js"></script>
</head>
<body>
Buy Price
<input type="number" min="0" id="bp"><br />
Sell Price
<input type="number" min="0" id="sp"><br />
Qty:
<input type="number" min="0" id="qty"><br />
NSE:
<input name="exchname" id="nse" value="0.0000325" type="radio" checked="checked"><br />
BSE:
<input name="exchname" id="bse" value="0.0000275" type="radio"><br />
Turnover:
<span id="turnover">0</span><br />
Brokerage:
<span id="brokerage">0</span><br />
Security Transction Tax:
<span id="stt">0</span><br />
Total Tran Charges:
<span id="ttc">0</span><br />
SEBI Charges:
<span id="sebi">0</span><br />
Service Tax:
<span id="servtax">0</span><br />
Stamp Duty:
<span id="std">0</span><br />
Total Brokerage + Taxes:
<span id="ttx">0</span><br />
Net Profit:
<span id="pnl">0</span><br />
<script>
$('input').keyup(function(){ // run anytime the value changes
var buyPrice = parseFloat($('#bp').val()); // get value of field
var sellPrice = parseFloat($('#sp').val()); // convert it to a float
var quantity = parseFloat($('#qty').val());
var turnoverValue = (buyPrice + sellPrice) * quantity;
var sttValue = sellPrice * quantity * 0.025 / 100;
var sebiValue = turnoverValue * 0.0002 / 100;
var stdValue = 0.00002 * turnoverValue;
var excrate = document.querySelector('input[name="exchname"]:checked').value;
if(buyPrice<166.67){
var brkgbp = 0.05;
} else {
var brkgbp = buyPrice * 0.03 / 100;
}
if(sellPrice<166.67){
var brkgsp = 0.05;
} else {
var brkgsp = sellPrice * 0.03 / 100;
}
var brokerageValue = (brkgbp + brkgsp) * quantity;
var ttcValue = excrate * turnoverValue;
var servtaxValue = (brokerageValue + ttcValue + sebiValue) * 15 / 100;
var ttxValue = brokerageValue + sttValue + ttcValue + sebiValue + servtaxValue + stdValue;
var pnlValue = ((sellPrice - buyPrice) * quantity) - ttxValue;
$('#turnover').html(turnoverValue.toFixed(2));
$('#brokerage').html(brokerageValue.toFixed(2));
$('#stt').html(sttValue.toFixed(2));
$('#sebi').html(sebiValue.toFixed(2));
$('#servtax').html(servtaxValue.toFixed(2));
$('#ttc').html(ttcValue.toFixed(2));
$('#std').html(stdValue.toFixed(2));
$('#ttx').html(ttxValue.toFixed(2));
$('#pnl').html(pnlValue.toFixed(2));
});
<script>
</body>
</html>
Your closing script tag is missing the /, i.e. </script>
For your inputs, you're checking for the release of a keyboard key, which wouldn't fire for clicking radio buttons. Since you're checking to see if the value of the input has changed, you should change $('input').keyup to $('input').change.
edit: of course, you should do the NaN checking as well, as the other answers indicated - but the problem you described is solved by using the change event.
Didn't you forgot to close the script tag?
<script> ... </script>
Also, use
var buyPrice = parseFloat($('#bp').val()) || 0;
to initialize with a default value, so you don't get NaN
If you want the values to change when you reselect an option in the radio buttons, use:
function calculate(){ // run anytime the value changes
....
}
$('input').on('keyup', calculate);
$('input').on('click', calculate);
EDIT: I made a JSfiddle
https://jsfiddle.net/v3qd7b26/
Multiple issue in your code
1. You are missing the / in the script tag at the end. It should be </script> instead of <script>.
2. You need to ensure that the values entered are valid numbers only and then only proceed further, you can validate that using isNaN function in javascript
if(!isNaN(buyPrice) && !isNaN(sellPrice) && !isNaN(quantity)){
3.
Also, for checkbox need to add another selector. So you can create a common function and call it.
$("input").keyup(calculate);
$("input:checked").keyup(calculate);
Complete code:
$("input").keyup(calculate);
$("input:checked").keyup(calculate);
function calculate(){ // run anytime the value changes
var buyPrice = parseFloat($('#bp').val()); // get value of field
var sellPrice = parseFloat($('#sp').val()); // convert it to a float
var quantity = parseFloat($('#qty').val());
if(!isNaN(buyPrice) && !isNaN(sellPrice) && !isNaN(quantity)){
var turnoverValue = (buyPrice + sellPrice) * quantity;
var sttValue = sellPrice * quantity * 0.025 / 100;
var sebiValue = turnoverValue * 0.0002 / 100;
var stdValue = 0.00002 * turnoverValue;
var excrate = document.querySelector('input[name="exchname"]:checked').value;
if(buyPrice<166.67){
var brkgbp = 0.05;
} else {
var brkgbp = buyPrice * 0.03 / 100;
}
if(sellPrice<166.67){
var brkgsp = 0.05;
} else {
var brkgsp = sellPrice * 0.03 / 100;
}
var brokerageValue = (brkgbp + brkgsp) * quantity;
var ttcValue = excrate * turnoverValue;
var servtaxValue = (brokerageValue + ttcValue + sebiValue) * 15 / 100;
var ttxValue = brokerageValue + sttValue + ttcValue + sebiValue + servtaxValue + stdValue;
var pnlValue = ((sellPrice - buyPrice) * quantity) - ttxValue;
$('#turnover').html(turnoverValue.toFixed(2));
$('#brokerage').html(brokerageValue.toFixed(2));
$('#stt').html(sttValue.toFixed(2));
$('#sebi').html(sebiValue.toFixed(2));
$('#servtax').html(servtaxValue.toFixed(2));
$('#ttc').html(ttcValue.toFixed(2));
$('#std').html(stdValue.toFixed(2));
$('#ttx').html(ttxValue.toFixed(2));
$('#pnl').html(pnlValue.toFixed(2));
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Buy Price
<input type="number" min="0" id="bp"><br />
Sell Price
<input type="number" min="0" id="sp"><br />
Qty:
<input type="number" min="0" id="qty"><br />
NSE:
<input name="exchname" id="nse" value="0.0000325" type="radio" checked="checked"><br />
BSE:
<input name="exchname" id="bse" value="0.0000275" type="radio"><br />
Turnover:
<span id="turnover">0</span><br />
Brokerage:
<span id="brokerage">0</span><br />
Security Transction Tax:
<span id="stt">0</span><br />
Total Tran Charges:
<span id="ttc">0</span><br />
SEBI Charges:
<span id="sebi">0</span><br />
Service Tax:
<span id="servtax">0</span><br />
Stamp Duty:
<span id="std">0</span><br />
Total Brokerage + Taxes:
<span id="ttx">0</span><br />
Net Profit:
<span id="pnl">0</span><br />

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

Categories