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>
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>
This is running good, but i want to show alert message if sum of all input value not equal to hundred and stop on same page.
function doMath(){
// Capture the entered values of two input boxes
var my_input1 = document.getElementById('my_input1').value;
var my_input2 = document.getElementById('my_input2').value;
var my_input3 = document.getElementById('my_input3').value;
var my_input4= document.getElementById('my_input4').value;
var my_input5 = document.getElementById('my_input5').value;
var my_input6 = document.getElementById('my_input6').value;
// Add them together and display
var sum = parseInt(my_input1) + parseInt(my_input2) + parseInt(my_input3) + parseInt(my_input4) + parseInt(my_input5) + parseInt(my_input6);
document.write(sum);
}
<input type="text" id="my_input1" /></br>
<input type="text" id="my_input2" /></br>
<input type="text" id="my_input3" /></br>
<input type="text" id="my_input4" /></br>
<input type="text" id="my_input5" /></br>
<input type="text" id="my_input6" />
<input type="button" value="Add Them Together" onclick="doMath();" />
Here is another solution
function _get(ID){
return document.getElementById(ID);
}
function doMath(){
var my_input1 = _get('my_input1').value ? parseInt(_get('my_input1').value) : 0;
var my_input2 = _get('my_input2').value ? parseInt(_get('my_input2').value) : 0;
var my_input3 = _get('my_input3').value ? parseInt(_get('my_input3').value) : 0;
var my_input4 = _get('my_input4').value ? parseInt(_get('my_input4').value) : 0;
var my_input5 = _get('my_input5').value ? parseInt(_get('my_input5').value) : 0;
var my_input6 = _get('my_input6').value ? parseInt(_get('my_input6').value) : 0;
// Add them together and display
var sum = my_input1 + my_input2 + my_input3 + my_input4 + my_input5 + my_input6;
if(sum==100){
alert('Sum is = 100');
/*YOUR CODE HERE*/
}else if(sum<100){
alert('Sum is less than 100');
/*YOUR CODE HERE*/
}else if(sum>100){
alert('Sum is bigger than 100');
/*YOUR CODE HERE*/
}
}
<input type="text" id="my_input1" /></br>
<input type="text" id="my_input2" /></br>
<input type="text" id="my_input3" /></br>
<input type="text" id="my_input4" /></br>
<input type="text" id="my_input5" /></br>
<input type="text" id="my_input6" />
<input type="button" value="Add Them Together" onclick="doMath();" />
Here is the details about Conditional (ternary) Operator
If I clearly understood what you want, you can try this:
var sum = parseInt(my_input1) + parseInt(my_input2) + parseInt(my_input3) + parseInt(my_input4) + parseInt(my_input5) + parseInt(my_input6);
if (sum != 100) {
alert('Different from a hundred')
return false;
}
I used return false in case you want to handle the result and take some other action.
You can use alert() function to display alert popup
if(sum!=100){
alert("Sum is not equal to 100");
}else{
document.write(sum);
}
Please refer working snippet
function doMath()
{
// Capture the entered values of two input boxes
var my_input1 = document.getElementById('my_input1').value;
var my_input2 = document.getElementById('my_input2').value;
var my_input3 = document.getElementById('my_input3').value;
var my_input4= document.getElementById('my_input4').value;
var my_input5 = document.getElementById('my_input5').value;
var my_input6 = document.getElementById('my_input6').value;
// Add them together and display
var sum = parseInt(my_input1) + parseInt(my_input2) + parseInt(my_input3) + parseInt(my_input4) + parseInt(my_input5) + parseInt(my_input6);
if(sum!=100){
alert("Sum is not equal to 100");
}else{
document.write(sum);
}
}
<input type="text" id="my_input1" /></br>
<input type="text" id="my_input2" /></br>
<input type="text" id="my_input3" /></br>
<input type="text" id="my_input4" /></br>
<input type="text" id="my_input5" /></br>
<input type="text" id="my_input6" />
<input type="button" value="Add Them Together" onclick="doMath();" />
Replace
document.write(sum);
with
if(sum==100) {
document.write(sum);
} else {
alert("show your messaage");
}
function doMath()
{
// Capture the entered values of two input boxes
var my_input1 = document.getElementById('my_input1').value;
var my_input2 = document.getElementById('my_input2').value;
var my_input3 = document.getElementById('my_input3').value;
var my_input4= document.getElementById('my_input4').value;
var my_input5 = document.getElementById('my_input5').value;
var my_input6 = document.getElementById('my_input6').value;
// Add them together and display
var sum = parseInt(my_input1) + parseInt(my_input2) + parseInt(my_input3) + parseInt(my_input4) + parseInt(my_input5) + parseInt(my_input6);
if(sum >= 100){
document.write(sum);
}
else{
alert("sum is less than 100")
}
}
<input type="text" id="my_input1" /></br>
<input type="text" id="my_input2" /></br>
<input type="text" id="my_input3" /></br>
<input type="text" id="my_input4" /></br>
<input type="text" id="my_input5" /></br>
<input type="text" id="my_input6" />
<input type="button" value="Add Them Together" onclick="doMath();" />
How would i add a cost for the check boxes. When i add a onClick it said myFunction was not defined. I Don't know what i am doing. I was trying to make a check with the second function so if it was checked it would add the costs together and make a subtotal but i cant get it to work or find a way to get the costs to be a value in the check boxes
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep" > Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="ch" >Cheese + 4$<br>
<br>
<input type="button" onClick="myFunction()" value="Send order"><br>
<input type="button" onClick="cost()" value="Get cost" > <br>
<input type="text" id="order" size="50">
</form>
<script type="text/javascript">
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) { // this shows the you ordered the pizza with blank topping
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var x = document.getElementById(pep).checked; // this is the failed check and i dont know how to fix it and get it to add a cost
document.getElementById("demo").innerhtml = x;
}
</script>
<p id="demo"></p>
</body>
</html>
answer that https://stackoverflow.com/users/7488236/manish-poduval got
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep">Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="che">Cheese + 4$<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
<input type="button" onclick="cost()" value="Get cost">
<br><br>
<input type="text" id="order" size="50">
</form>
<script>
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) {
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var pep = 5;
var che = 4;
var pizza = 13;
var total = 0;
if (document.getElementById("pep").checked === true) {
total += pep;
}
if (document.getElementById("che").checked === true) {
total += che;
}
document.getElementById("order").value = "The cost is : " + total;
}
</script>
</body>
</html>
document.getElementById("pep").checked;
You have not written this line properly. after this check the value of x if it is true then add the value 5$ to 13$ and sum it up the cost and display it on a text field.
Let me know if it works or not.
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>
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;
}