I have a JavaScript function that is triggered onchange. What it does is take the value from a input field and then add it to the value entered in another field and then display the answer in a different field.

It works fine the first time, but when I enter a new value and leave the field there is an error: TotalPurchasePrice is not a function

function TotalPurchasePrice(BuyinPrice, TopupAmount) {
var BuyinPrice
var TopupAmount
BuyinPrice = BuyinPrice.toString().replace(/\£|\,/g, '');
TopupAmount = TopupAmount.toString().replace(/\£|\,/g, '');

TotalPurchasePrice = (BuyinPrice * 1) + (TopupAmount * 1);

document.getElementById('tTotalPurchasePrice').value = TotalPurchasePrice;
}

Can anyone tell me why this would only work once?

I have a JavaScript function that is triggered onchange. What it does is take the value from a input field and then add it to the value entered in another field and then display the answer in a different field.

It works fine the first time, but when I enter a new value and leave the field there is an error: TotalPurchasePrice is not a function

function TotalPurchasePrice(BuyinPrice, TopupAmount) {
var BuyinPrice
var TopupAmount
BuyinPrice = BuyinPrice.toString().replace(/\£|\,/g, '');
TopupAmount = TopupAmount.toString().replace(/\£|\,/g, '');

TotalPurchasePrice = (BuyinPrice * 1) + (TopupAmount * 1);

document.getElementById('tTotalPurchasePrice').value = TotalPurchasePrice;
}

Can anyone tell me why this would only work once?

• javascript

3 Answers 3

This line :

TotalPurchasePrice = (BuyinPrice * 1) + (TopupAmount * 1);

replaces the TotalPurchasePrice function by a number. Then it's not a function, hence the error you have.

Use a different variable name :

var totalPrice = (BuyinPrice * 1) + (TopupAmount * 1);
document.getElementById('tTotalPurchasePrice').value = totalPrice;

You could also simply have added the var keyword but it would have made the code confusing.

A way to reduce the probability of such errors is to follow best practices when naming functions and variables. Here you should have named your function as a verb to denote an action instead of a value.

You're are confusing JavaScript with VBScript here.

To return value use return keyword:

return (BuyinPrice * 1) + (TopupAmount * 1);

Then outside the function have such line:

document.getElementById('tTotalPurchasePrice').value = TotalPurchasePrice(BuyinPrice, TopupAmount);

Assigning the value of a variable inside a function without stating it with var (TotalPurchasePrice in your case) means that the variable is global.

Since you could have the function declaration written as: var TotalPurchasePrice = function(BuyinPrice, TopupAmount) {}, you are just overriding it.

You could either rename the variable inside the function or add a var statement in front of it like:

var TotalPurchasePrice = (BuyinPrice * 1) + (TopupAmount * 1);