Ok, I have these input boxes.
<input
type="text"
name="amount"
class="validate[required] text-input"
id="amount">
<input type="text"
name="incfee"
id="incfee"
readonly>
And this is the javascript I have :-
<script type="text/javascript">
window.onload = function() {
var amount = document.getElementById('amount');
var incfee = document.getElementById('incfee');
var fee = 0.01;
amount.onkeyup = function() {
var result = parseFloat(amount.value) * fee;
// var result1 = result + amount;
incfee.value = !isNaN(result) ? result : '';
};
}
</script>
Now, the problem is, that if I comment the line "var result1 = result + amount;" and rename result1 to result in incfee.value , the value of the textbox (amount including fee) changes with the value in amount and everything works fine.
BUT, If I uncomment the line var result1 = result + amount; and change result to result 1 in incfee.value, the javascript doesn't works and no value is populated in the incfee textbox.
What mistake am I doing?
Thanks.
var result1 = result + parseFloat(amount.value);
Javacript doesnt know how to add a float and an input-object.
Use .value to get value of input text
var amount = document.getElementById('amount').value;
var incfee = document.getElementById('incfee').value;
Related
Im trying to make a a simple form to calculate my client's services. I want to make a function that adds up the services' values and show them right away without clicking in the button. I have no idea where I'm wrong.
<p>In total: <span id="number"></span></p>
<script>
var kilometry = document.getElementById("kilom").value;
var DoSto = document.getElementById("myRange1").value;
var OdSto = document.getElementById("myRange2").value;
var z = (+kilometry*2.5) + (+DoSto*20) + (+OdSto*80);
var x = document.getElementById("number");
x.innerHTML = z.value;
z.oninput = function() {
x.innerHTML = this.value;
}
</script>
Can you explain why it doesnt work? smh
Your script is running immediately and once only. You need to introduce an event that occurs each time you change the value of an input.
<p>In total: <span id="number"></span></p>
<input id="kilom" onchange=calculateTotal()>
<input id="myRange1" onchange=calculateTotal()>
<input id="myRange2" onchange=calculateTotal()>
<script>
function calculateTotal() {
var kilometry = document.getElementById("kilom").value;
var DoSto = document.getElementById("myRange1").value;
var OdSto = document.getElementById("myRange2").value;
var z = (+kilometry*2.5) + (+DoSto*20) + (+OdSto*80);
var x = document.getElementById("number");
x.innerHTML = z;
}
</script>
function calculateTotal() {
var kilometry = document.getElementById("kilom").value;
var DoSto = document.getElementById("myRange1").value;
var OdSto = document.getElementById("myRange2").value;
var z = (+kilometry*2.5) + (+DoSto*20) + (+OdSto*80);
var x = document.getElementById("number");
x.innerHTML = z;
}
<p>In total: <span id="number"></span></p>
<input id="kilom" onchange=calculateTotal()>
<input id="myRange1" onchange=calculateTotal()>
<input id="myRange2" onchange=calculateTotal()>
The variable z is not an input element. It is a number. So you cannot access .value or .oninput on that variable.
So in that regard. This..
x.innerHTML = z.value;
Should be..
x.innerHTML = z;
And I guess you want the value in the x tag to update in realtime? You need to add event listeners to all the input elements you use to calculate the z variable.
So that means the following code..
z.oninput = function() {
x.innerHTML = this.value;
}
can be rewritten as..
function calculateZ() {
var z = (+kilometry*2.5) + (+DoSto*20) + (+OdSto*80);
x.textContent = z; // x.innerHTML = z; works as well, but is less safe.
}
// Triggers when changing the value in the kilom, myRange1 and myRange2 input tags
document.getElementById("kilom").addEventListener('change', calculateZ);
document.getElementById("myRange1").addEventListener('change', calculateZ);
document.getElementById("myRange2").addEventListener('change', calculateZ);
I'm making a tip calculator and I would like the tip amount to display for the user to see. The problem I'm having is the output showing up as 'NaN' or 'undefined'. I've tried making changes to my code but I keep getting the same result.
function calculateTip() {
var billInput = document.getElementById('bill');
var tipPercentage = document.getElementById('tip');
var tipPercentageCalc = (tipPercentage / 100);
var tipAmount = (bill * tipPercentageCalc).toFixed(2);
tipAmount = tipAmount.toString();
document.getElementById('display_text').innerHTML = 'Tip = $', +tipAmount;
};
<div id='calculate'>
<p>Bill: $<input id="bill" type="number" name="bill" placeholder="Enter bill amount" onchange="calculateTip()"></p>
<p>Tip: %<input id="tip" type="number" name="tip" placeholder="15%" onchange="calculateTip()"></p>
<input type="button" name="submit" onclick="calculateTip();">
</div>
<div id="display">
<h4 id="display_text"></h4>
</div>
You forgot to get the value of your fields. Because without the property .value, it returns HTMLObject.
function calculateTip() {
var billInput = parseFloat(document.getElementById('bill').value);
var tipPercentage = parseFloat(document.getElementById('tip').value);
var tipPercentageCalc = (tipPercentage / 100);
var tipAmount = (bill * tipPercentageCalc).toFixed(2);
tipAmount = tipAmount.toString();
document.getElementById('display_text').innerHTML = 'Tip = $', + tipAmount;
};
You are reading billInput and tipPercentage as HTML element objects instead of the text the user types into them, which will be their .value properties.
function calculateTip() {
// get the VALUE property of the textbox elements
// parseInt will turn them into numbers if they're not already.
// if they are not numbers you cannot use them in math.
var billInput = parseInt(document.getElementById('bill').value);
var tipPercentage = parseInt(document.getElementById('tip').value);
var tipPercentageCalc = (tipPercentage / 100);
var tipAmount = (billInput * tipPercentageCalc);
// isNaN stands for "is Not a Number"
// this checks if tipAmount is not a number
// if it is not we simply set it to the number 0
if (isNaN(tipAmount)) {
tipAmount = 0;
}
// when you concatenate a number to a string you do not need to turn it into a string.
// it will automatically be converted
document.getElementById('display_text').innerHTML = 'Tip = $' + tipAmount;
};
function calculateTip() {
// get the VALUE property of the textbox elements
// parseInt will turn them into numbers if they're not already.
// if they are not numbers you cannot use them in math.
var billInput = parseInt(document.getElementById('bill').value);
var tipPercentage = parseInt(document.getElementById('tip').value);
var tipPercentageCalc = (tipPercentage / 100);
var tipAmount = (billInput * tipPercentageCalc);
// isNaN stands for "is Not a Number"
// this checks if tipAmount is not a number
// if it is not we simply set it to the number 0
if (isNaN(tipAmount)) {
tipAmount = 0;
}
// when you concatenate a number to a string you do not need to turn it into a string.
// it will automatically be converted
document.getElementById('display_text').innerHTML = 'Tip = $' + tipAmount;
};
<div id='calculate'>
<p>Bill: $<input id="bill" type="number" name="bill" placeholder="Enter bill amount" onchange="calculateTip()"></p>
<p>Tip: %<input id="tip" type="number" name="tip" placeholder="15%" onchange="calculateTip()"></p>
<input type="button" name="submit" onclick="calculateTip();">
</div>
<div id="display">
<h4 id="display_text"></h4>
</div>
You're loading the element instead of the element value when declaring the variables billInput and tipPercentage. Try with this code:
var billInput = document.getElementById('bill').value;
var tipPercentage = document.getElementById('tip').value;
I am trying to put some amount, then it will show the calculation if all input will given any number, but I want, when I do not put anything in any one of that input, then the input will count "0" automatically..
<body>
<input type='text' id='aaa'/>
<input type='text' id='bbb'/>
<input type='text' id='ccc'/>
<input type='text' id='answer' name='ans' />
<form name ="testarea" Method="GET" Action="" id='form1'>
<input type="button" onClick="Calculate();" value="calculate"/>
</form>
</body>
<script>
function Calculate()
{
var aaa= document.getElementById('aaa').value;
var bbb= document.getElementById('bbb').value;
var ccc= document.getElementById('ccc').value;
var permin = parseFloat(aaa) * 82;
var permin1 = parseFloat(bbb) * 40;
var permin2 = parseFloat(ccc) * 10;
var permin3=permin+permin1+permin2;
document.getElementById('answer').value=permin3;
document.form1.submit();
}
</script>
var aaa= document.getElementById('aaa').value;
var bbb= document.getElementById('bbb').value;
var ccc= document.getElementById('ccc').value;
var permin = (parseFloat(aaa)||0) * 82;
var permin1 = (parseFloat(bbb)||0) * 40;
var permin2 = (parseFloat(ccc)||0) * 10;
var permin3=permin+permin1+permin2;
document.getElementById('answer').value=permin3;
You can use the OR operator to replace NaN with 0 if parseFloat returns NaN.
You could shorten the upper code to:
const ids = ["aaa","bbb","ccc"];
const factors = [82,40,10];
document.getElementById("answer").value = ids.reduce((count,id,index) => {
const { value } = document.getElementById(id);
return count + (parseFloat(value) || 0) * factors[index];
}, 0);
An alternative you can do is use a default parameter for your function.
Your calculate would look something like this:
Calculate(aaa=0, bbb, ccc) {
And this question covers how to pass html elements as parameters for functions.
Instead of using an if/else construct you can rely on the falsy value of an empty string.
Therefore you can initialize all your variables like this:
var aaa = document.getElementById('aaa').value || '0';
More information on falsy values can be found on the MDN.
I want to multiply the input value with p tag when press the button. My html structure is like this:
<div class="table">
<input class="input" type="text" />
<p>10</p>
</div>
<div class="table">
<input class="input" type="text" />
<p>20</p>
</div>
<div class="bill"></div> // the result must be displayed in this tag
<button class="button">Calculate</button>
I use each method to select input elements and it is my jquery structure:
$(function() {
function calculate()
{
$('input.input').each(function(index) {
var inputValue = $(this).val();
var valueP = $(this).next('p').text();
var result = inputValue * valueP;
$('.bill').text(result);// displays only last multipled result
console.log(result); // displays all multipled results
});
}
$('.button').click(function() {
calculate();
});
});
I achive to multiply input value with p tag but the problem is that only last multiplied input value displays in the class with "bill". But it looks fine with console.log
Also, it is fine with "document.write(result)". How can I fix this problem?
By the way, someone could say me please how can I sum all multiplied results!
Thanks for advance!
try this demo
function calculate() {
var result = 0;
$('input.input').each(function(index) {
var inputValue = Number($(this).val());
var valueP = Number($(this).next('p').text());
result += inputValue * valueP;
//as you were adding here it will each time update the .bill
console.log(result);
});
$('.bill').text(result);
}
$('.button').click(calculate);
update
demo for showing all calculated result beside adding them
function calculate()
{
//var result = 0;
$('input.input').each(function(index) {
var inputValue = Number($(this).val());
var valueP = Number($(this).next('p').text());
var result = inputValue * valueP;
$('.bill').append(result+"<br/>");
console.log(result);
});
}
$('.button').click(calculate);
Please try this:
function calculate() {
var result = 0;
$('input.input').each(function(index) {
var inputValue = Number($(this).val());
var valueP = Number($(this).next('p').text());
result += inputValue * valueP;
$('.bill').append(result);
console.log(result);
});
}
$('.button').click(calculate);
Why do I get only zero in my calculation?
Code:
<?php echo 'AU$ <input type="text" name="pay_total" class="amount_text_change" id="amount_textbox_'.$i.'" onChange="UpdateValue_'.$i.'()" onKeyUp="AddInputs()" value="1">'; ?>
<td>Total</td>
<td>AU$ <span id="Display"></span></td>
Javascript:
function AddInputs()
{
var total = 0;
//var coll = document.getElementsByTagName("input")
var coll = document.getElementsByTagName("pay_total")
for ( var i = 0; i<coll.length; i++)
{
var ele = coll[i];
total += parseInt(ele.value);
}
var Display = document.getElementById("Display");
Display.innerHTML = total;
}
This javascript will auto add everytime user enter a numeric value in the textbox, but it's strange, the result is zero, must be something missing, can you help me?
Thanks
This...
document.getElementsByTagName("pay_total")
should be...
document.getElementsByName("pay_total")