I've found different types of snippets on here calculating interest and so forth but unable to find the help I need.
I'm making a simple form and using Javascript to find the compounded interest and output it in HTML.
I've used the getDocumentById with and without the innerHTML as well as placing it in parseInt(). Long story short, I get 'NaN' as output.
Take a look at what I finished up with and maybe someone can point me as to what I might be missing. Thanks
<form onsubmit="return false">
<input id="a" name="a" type="number" step="any" placeholder="Present Value"> * (
<input id="b" name="b" type="number" step="any" placeholder="Number of years"> +
<input id="c" name="c" type="number" step="any" placeholder="Interest Rate">)^
<input id="d" name="d" type="number" step="any" placeholder="N number of Years">=
<button onclick="futureNyears()">Answer</button>
<p id="futureNanswer"></p>
</form>
<script type="text/javascript">
function futureNyears() {
var a = parseInt(document.getElementById('a'));
var b = parseInt(document.getElementById('b'));
var c = parseFloat(document.getElementById('c'));
var d = parseInt(document.getElementById('d'));
var E = eval(b+c);
var r = Math.pow(E, d);
var f = eval(E * r);
var g = f.toString();
document.getElementById("futureNanswer").innerHTML = g;
}
</script>
After getting element by ID, you need to access the value attribute, parseInt received DOM object which equated to NaN all time.
function futureNyears() {
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
var c = parseFloat(document.getElementById('c').value);
var d = parseInt(document.getElementById('d').value);
var E = (b+c);
var r = Math.pow(E, d);
var f = (E * r);
var g = f.toString();
document.getElementById("futureNanswer").innerHTML = g;
}
<form onsubmit="return false">
<input id="a" name="a" type="number" step="any" placeholder="Present Value"> * (
<input id="b" name="b" type="number" step="any" placeholder="Number of years"> +
<input id="c" name="c" type="number" step="any" placeholder="Interest Rate">)^
<input id="d" name="d" type="number" step="any" placeholder="N number of Years">=
<button onclick="futureNyears()">Answer</button>
<p id="futureNanswer"></p>
</form>
document.getElementById('a') return the dom element so you have to get the value out of it like below
var a = parseInt(document.getElementById('a').value);
In your case you forgot to write document.getElementById('a').value() because its a form element and you cannot extract its value without value() attribute.
Parseint() always return the first number detected in your string .
You need to use the .value property to return the value of the particular element.
var a = parseInt(document.getElementById('a').value);
The value property sets or returns the value of the option (the value to be sent to the server when the form is submitted)
HTML
<!DOCTYPE html>
<html>
<head>
<title>CI</title>
</head>
<body>
<form onsubmit="return false">
<input id="a" name="a" type="number" step="any" placeholder="Present Value"> * (
<input id="b" name="b" type="number" step="any" placeholder="Number of years"> +
<input id="c" name="c" type="number" step="any" placeholder="Interest Rate">)^
<input id="d" name="d" type="number" step="any" placeholder="N number of Years">=
<button onclick="futureNyears()">Answer</button>
<p id="futureNanswer"></p>
</form>
</body>
</html>
JavaScript
<script type="text/javascript">
function futureNyears() {
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
var c = parseFloat(document.getElementById('c').value);
var d = parseInt(document.getElementById('d').value);
var E = eval(b+c);
var r = Math.pow(E, d);
var f = eval(E * r);
var g = f.toString();
document.getElementById("futureNanswer").innerHTML = g;
}
</script>
In order to get a value from input text box use
var a = parseInt(document.getElementById('a').value);
instead of
var a = parseInt(document.getElementById('a'));
<form onsubmit="return false">
<input id="a" name="a" type="number" step="any" placeholder="Present Value"> * (
<input id="b" name="b" type="number" step="any" placeholder="Number of years"> +
<input id="c" name="c" type="number" step="any" placeholder="Interest Rate">)^
<input id="d" name="d" type="number" step="any" placeholder="N number of Years">=
<button onclick="futureNyears()">Answer</button>
<p id="futureNanswer"></p>
</form>
<script type="text/javascript">
function futureNyears() {
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
var c = parseFloat(document.getElementById('c').value);
var d = parseInt(document.getElementById('d').value);
var E = eval(b+c);
var r = Math.pow(E, d);
var f = eval(E * r);
var g = f.toString();
document.getElementById("futureNanswer").innerHTML = g;
}
</script>
Related
I want to calculate this formula (PD)/(2SMYSDFT*E) but when I click calculate Botton nothing happens (ps: I am not an expert )
I put the input and then I click calculate put no answer.
I made some changes on the code but still not working . please can someone edit the code!
<body>
<label for="formulas">Choose a formula:</label>
<select name="formulas" id="formulas">
<option value="free">Pipeline Thickness</option>
</select>
<h2>Enter inputs</h2>
<label for="P">MAOP=</label>
<input type="number" id="P" name="P">
<br>
<label for="D=">Do=</label>
<input type="number" id="D" name="D" >
<br>
<label for="SMYS">SMYS=</label>
<input type="number" id="SMYS" name="SMYS">
<br>
<label for="DF">DF=</label>
<input type="number" id="DF" name="SMYS">
<br>
<label for="T">T=</label>
<input type="number" id="T" name="T">
<br>
<label for="E">E ⅉ=</label>
<input type="number" id="E" name="E ⅉ=" >
<br>
<button type="button" onclick="calculate">calculate</button>
<p id="demo"></p>
<script>
document.getElementById('calculate').addEventListener('click', function() {
var amount = document.getElementById("P").value;
var amount = +P;
var quantity = document.getElementById("D").value;
var quantity = +D;
var amount = document.getElementById("SMYS").value;
var amount = +SMYS;
var amount = document.getElementById("DF").value;
var amount = +DF;
var amount = document.getElementById("T").value;
var amount = +T;
var amount = document.getElementById("E").value;
var amount = +E;
var total = (P * D) / (2 * SMYS * DF * T * E);
document.getElementById("total").value = total;
});
</script>
</head>
</body>
</html>
</form>
My program calculates a student's GPA, but it only accurately outputs a GPA if one input is filled out. Once any other inputs are filled out, the program outputs wildly inaccurate numbers. How can I fix this?
The JavaScript:
function computeGPA() {
var aPlus = document.getElementById("aPlus").value;
var a = document.getElementById("a").value;
var aMinus = document.getElementById("aMinus").value;
var bPlus = document.getElementById("bPlus").value;
var b = document.getElementById("b").value;
var bMinus = document.getElementById("bMinus").value;
var cPlus = document.getElementById("cPlus").value;
var c = document.getElementById("c").value;
var cMinus = document.getElementById("cMinus").value;
var dPlus = document.getElementById("dPlus").value;
var d = document.getElementById("d").value;
var dMinus = document.getElementById("dMinus").value;
var f = document.getElementById("f").value;
var og = ((aPlus*4)+(a*4)+(aMinus*3.7)+(bPlus*3.3)+(b*3)+(bMinus*2.7)+(cPlus*2.3)+(c*2)+(cMinus*1.7)+(dPlus*1.3)+(d*1)+(dMinus*.7))/((aPlus)+(a)+(aMinus)+(bPlus)+(b)+(bMinus)+(cPlus)+(c)+(cMinus)+(dPlus)+(d)+(dMinus))
var prettyOg = og.toFixed(2);
document.getElementById("og").innerHTML = "GPA: " + prettyOg;
}
The HTML body:
<h1> Overall Grade Calculator</h1>
<p>Number of A+: <input id="aPlus" min="0" max="120"></input></p>
<p>Number of A: <input id="a" min="0" max="120"></input></p>
<p>Number of A-: <input id="aMinus" min="0" max="120"></input></p>
<p>Number of B+: <input id="bPlus" min="0" max="120"></input></p>
<p>Number of B: <input id="b" min="0" max="120"></input></p>
<p>Number of B-: <input id="bMinus" min="0" max="120"></input></p>
<p>Number of C+: <input id="cPlus" min="0" max="120"></input></p>
<p>Number of C: <input id="c" min="0" max="120"></input></p>
<p>Number of C-: <input id="cMinus" min="0" max="120"></input></p>
<p>Number of D+: <input id="dPlus" min="0" max="100"></input></p>
<p>Number of D: <input id="d" min="0" max="120"></input></p>
<p>Number of D-: <input id="dMinus" min="0" max="120"></input></p>
<p>Number of F: <input id="f" min="0" max="120"
<br>
<br>
<button onclick="computeGPA()">Submit</button>
<h2 id="og"></h2>
Since + operator used for concatenation as well as addition. Input box will provide string values so it's an ambiguous operation. To avoid this use parseInt() for addition operation.
Have a look at following example
let a = '3';
let b = '5';
const result = a + b;
console.log('Result without parsing', result);
const resultWithParse = parseInt(a, 10) + parseInt(b, 10);
console.log('Result after parsing', resultWithParse);
I have the following simple calculation which adds two values together. These values relate to the Rand (South African currency) which is identified using an "R" as a prefix).
function calculate() {
var A = parseFloat(document.getElementById("A").value);
var B = parseFloat(document.getElementById("B").value);
var total = A+B;
document.getElementById("total").value = total;
};
<input type="text" id="A" placeholder="First amount in R"> +
<input type="text" id="B" placeholder="Second amount in R">
<input type="button" onClick="calculate()" value="Calculate"> =
<output id="total">R</output>
Is it possible for the output value to include "R" as a permanent prefix? For example, 4 + 4 = R8
Yes sure you've just to Add the R prefix to the output result, like :
document.getElementById("total").value = 'R' + total;
Working snippet :
function calculate() {
var A = parseFloat(document.getElementById("A").value);
var B = parseFloat(document.getElementById("B").value);
var total = A + B;
document.getElementById("total").value = 'R' + total;
};
<input type="text" id="A" placeholder="First amount in R"> +
<input type="text" id="B" placeholder="Second amount in R">
<input type="button" onClick="calculate()" value="Calculate"> =
<output id="total">R</output>
You can use a regular expression to extract that text instead of adding it explicitly. This way you can add it dynamically:
function calculate() {
let el = document.getElementById("total");
let txt = el.value.match(/(\w)/)[0]; // extract the text 'R'
var A = parseFloat(document.getElementById("A").value);
var B = parseFloat(document.getElementById("B").value);
var total = A + B;
el.value = txt + total;
};
<input type="text" id="A" placeholder="First amount in R"> +
<input type="text" id="B" placeholder="Second amount in R">
<input type="button" onClick="calculate()" value="Calculate"> =
<output id="total">R</output>
You can use the native Intl.NumberFormat https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
var total = new Intl.NumberFormat('af-NA',
{ style: 'currency', currency: 'ZAR' }).format(A + B);
Simply append string R before your output like this:
function calculate() {
var A = parseFloat(document.getElementById("A").value);
var B = parseFloat(document.getElementById("B").value);
var total = A+B;
document.getElementById("total").value = `R${total}`;
};
<input type="text" id="A" placeholder="First amount in R"> +
<input type="text" id="B" placeholder="Second amount in R">
<input type="button" onClick="calculate()" value="Calculate"> =
<b><output id="total">R</output></b>
This should be pretty simple, but I can't get it right. When I click the button with onclick event to a function, the total price won't show up on the input. What's wrong with my code?
<html>
<body>
<h1>KASIR</h1>
<form>
-------<b>Nama Barang</b>----------------------------<b>Harga</b>--------
<br>
<input type=text> Rp.
<input id="a" type=number>
<br>
<input type=text> Rp.
<input id="b" type=number>
<br>
<input type=text> Rp.
<input id="c" type=number>
<br>
<input type=text> Rp.
<input id="d" type=number>
<br>
<br>
<button onclick="fungsi()">Hitung!</button> <b>Total</b> Rp.
<input id="total" type=number>
</form>
<script>
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
var d = document.getElementById("d").value;
var total = a + b + c + d;
function fungsi() {
document.getElementById("total").value = total;
}
</script>
</body>
</html>
this works
function fungsi() {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
var d = document.getElementById("d").value;
var total = parseFloat(a) + parseFloat(b) + parseFloat(c) + parseFloat(d);
document.getElementById("total").value = total;
}
<h1>KASIR</h1>
<form>
-------<b>Nama Barang</b>----------------------------<b>Harga</b>--------
<br>
<input type=text>Rp.
<input id="a" type=number>
<br>
<input type=text>Rp.
<input id="b" type=number>
<br>
<input type=text>Rp.
<input id="c" type=number>
<br>
<input type=text>Rp.
<input id="d" type=number>
<br>
<br>
<button onclick="fungsi()">Hitung!</button> <b>Total</b> Rp.
<input id="total" type=number>
</form>
first of all your page are refreshing due to form and button that would be require to prevent.
below i have provided code.
<form>
<br>
<input type=text> Rp.
<input id="a" type=number>
<br>
<input type=text> Rp.
<input id="b" type=number>
<br>
<input type=text> Rp.
<input id="c" type=number>
<br>
<input type=text> Rp.
<input id="d" type=number>
<br>
<br>
<button id="buttonClick" >Hitung!</button> <b>Total</b> Rp.
<input id="total" type="button"/>
</form>
<script>
$("#buttonClick").click(function (event) {
event.preventDefault();
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
var d = document.getElementById("d").value;
var total = a + b + c + d;
document.getElementById("total").value = total;
alert('jkhejhS');
});
</script>
You need to capture the values inside the function, not when the script is first run.
Also, adding type="button" to the button stops it submitting the form.
ie:
function fungsi(){
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
var c = parseFloat(document.getElementById("c").value);
var d = parseFloat(document.getElementById("d").value);
a = a ? a : 0;
b = b ? b : 0;
c = c ? c : 0;
d = d ? d : 0;
var total = a + b + c + d;
document.getElementById("total").value = total;
}
function fungsi() {
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
var c = parseFloat(document.getElementById("c").value);
var d = parseFloat(document.getElementById("d").value);
a = a ? a : 0;
b = b ? b : 0;
c = c ? c : 0;
d = d ? d : 0;
var total = a + b + c + d;
document.getElementById("total").value = total;
}
<form>
-------<b>Nama Barang</b>----------------------------<b>Harga</b>------
<br>
<input type=text>Rp.
<input id="a" type=number>
<br>
<input type=text>Rp.
<input id="b" type=number>
<br>
<input type=text>Rp.
<input id="c" type=number>
<br>
<input type=text>Rp.
<input id="d" type=number>
<br>
<br>
<button onclick="fungsi()" type="button">Hitung!</button> <b>Total</b>Rp.
<input id="total" type=number>
</form>
There are a couple of issues with your code.
The JavaScript is executed while the page loads. That means you are getting the input values before the user had a chance to enter them.
total, a, b, etc. won't magically update their values when the user enters the values in the inputs. You have to retrieve the values when the button was clicked, i.e. inside the event handler. However, you can store a reference to the DOM elements themselves so that you do not have to look for them every time the button is pressed.
For easy of use later on, I suggest to put them into an array:
// Array of input elements
var inputs = [
document.getElementById("a"),
document.getElementById("b").
// ...
];
var total = document.getElementById("total");
function fungsi() {
// here you get their values e.g.
console.log(inputs[0].value);
// but we will see a better way to compute the total
}
Instead of getting every input individually by ID, you can also use document.querySelectorAll, to select all of them "at once":
var inputs = [].slice.call(document.querySelectorAll('input[type=number]'));
The [].slice.call part is necessary to convert the NodeList returned by querySelectorAll into an actual array.
a + b + c + d performs string concatenation instead of addition, because .value returns a string. I.e. if the inputs are 1, 2, 3 and 4, the value of total would be the string "1234" instead of the number 10.
You have to convert the values to numbers first. There various ways to do this. One of them is to pass the string value to the Number function.
To sum the values we can use .reduce if you put the DOM elements inside the array.
Example:
function fungsi() {
var sum = inputs.reduce(function(sum, input) {
return sum + Number(input.value);
}, 0);
total.value = sum;
}
<button> elements are submit buttons by default, i.e. clicking the button will submit the form. This will cause the browser send a request to the target of the form and load that side. Since you did not provide a target, the browser will basically reload the page, so you won't see the changes made by JavaScript.
You can disable this behavior by declaring the button as "dummy" button, using type="button":
<button type="button" onclick="fungsi()">Hitung!</button>
DEMO
var inputs = [].slice.call(document.querySelectorAll('input[type=number]'));
var total = document.getElementById("total");
function fungsi() {
var sum = inputs.reduce(function(sum, input) {
return sum + Number(input.value);
}, 0);
total.value = sum;
}
<h1>KASIR</h1>
<form>
-------<b>Nama Barang</b>----------------------------<b>Harga</b>--------
<br>
<input type=text>Rp.
<input id="a" type=number>
<br>
<input type=text>Rp.
<input id="b" type=number>
<br>
<input type=text>Rp.
<input id="c" type=number>
<br>
<input type=text>Rp.
<input id="d" type=number>
<br>
<br>
<button type="button" onclick="fungsi()">Hitung!</button> <b>Total</b> Rp.
<input id="total" type=number>
</form>
Write Your function like this...
function fungsi() {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
var d = document.getElementById("d").value;
var total = a + b + c + d;
document.getElementById("total").value = total;
}
Thats right, first of all remove form tag as it will refresh the page second convert your variables from string to number like this..
function fungsi(){
var a = Number(document.getElementById("a").value);
var b = Number(document.getElementById("b").value);
var c = Number(document.getElementById("c").value);
var d = Number(document.getElementById("d").value);
var total = a + b + c + d;
document.getElementById("total").value = total;
}
I am new to JavaScript, and I'm trying to figure out how to pass user-inputted values as a parameter to a JavaScript function. Here is my code:
<body>
<h1>Adding 'a' and 'b'</h1>
<form>
a: <input type="number" name="a" id="a"><br>
b: <input type="number" name="b" id="a"><br>
<button onclick="add(a,b)">Add</button>
</form>
<script>
function add(a,b) {
var sum = a + b;
alert(sum);
}
</script>
</body>
One way is by using document.getElementByID, as below -
<body>
<h1>Adding 'a' and 'b'</h1>
a: <input type="number" name="a" id="a"><br> b: <input type="number" name="b" id="b"><br>
<button onclick="add(document.getElementById('a').value,document.getElementById('b').value)">Add</button>
<script>
function add(a, b) {
var sum = parseInt(a, 10) + parseInt(b, 10);
alert(sum);
}
</script>
</body>
Firstly an elements ID should always be unique. If your element IDs aren't unique then you would always get conflicting results. Imagine in your case using two different elements with the same ID.
<form>
a: <input type="number" name="a" id="a"><br>
b: <input type="number" name="b" id="b"><br>
<button onclick="add()">Add</button>
</form>
<script>
function add() {
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
var sum = parseInt(a) + parseInt(b);
alert(sum);
}
</script>
1 IDs are meant to be unique
2 You dont need to pass any argument as you can call them in your javascript
<form>
a: <input type="number" name="a" id="a"><br>
b: <input type="number" name="b" id="b"><br>
<button onclick="add()">Add</button>
</form>
<script>
function add() {
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
var sum = a + b;
alert(sum);
}
</script>
<form action="" onsubmit="additon()" name="form1" id="form1">
a: <input type="number" name="a" id="a"><br>
b: <input type="number" name="b" id="b"><br>
<input type="submit" value="Submit" name="submit">
</form>
<script>
function additon()
{
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
var sum = parseInt(a) + parseInt(b);
return sum;
}
</script>
You can get the values with use of ID. But ID should be Unique.
<body>
<h1>Adding 'a' and 'b'</h1>
<form>
a: <input type="number" name="a" id="a"><br>
b: <input type="number" name="b" id="b"><br>
<button onclick="add()">Add</button>
</form>
<script>
function add() {
a = $('#a').val();
b = $('#b').val();
var sum = a + b;
alert(sum);
}
</script>
</body>
do you use jquery?
if then:
$('#xx').val();
or use original javascript(DOM)
document.getElementById('xx').value
or
xxxform.xx.value;
if you want to learn more, w3chool can help you a lot.
Use this it will work,
<body>
<h1>Adding 'a' and 'b'</h1>
<form>
a: <input type="number" name="a" id="a"><br>
b: <input type="number" name="b" id="a"><br>
<button onclick="add()">Add</button>
</form>
<script>
function add() {
var m = document.getElementById("a").value;
var n = document.getElementById("b").value;
var sum = m + n;
alert(sum);
}
</script>
</body>
I like how most answers here don't know that javascript accepts every input as string unless we use parseInt.
Yes, you can pass parameters in that way.
Just a little modification
Var sum = parseFloat(a)+parseFloat (b);
Try it (｡•̀ᴗ-)✧