Question

I have the following javascript function:

function updatePrintCost()
{
    var qty = parseFloat(document.getElementById('qty').value);
    var pp = parseFloat(document.getElementById('pp').value);

    var finalPrice = qty * pp;

    if (!isNaN(finalPrice))
        fp.value = "$" + finalPrice.toFixed(2);
    else
        fp.value = "Error";
}

it’s called by the following HTML code:

<table>
    <tr>
        <td style='border:none;'>Quantity:</td>
        <td style='border:none;'><input type='text' id='qty' name='quantity' onChange="updatePrintCost()" style='width:50px;' /></td>
        <td style='border:none;'>Print Price:</td>
        <td style='border:none;'><input type='text' name='printPrice' id='pp' onChange="updatePrintCost()" style='width:50px;' /></td>
        <td style='border:none;'> = </td>
        <td style='border:none;'><input type='finalPrice' id='fp' placeholder='0.00' style='width:75px;' /></td>
    </tr>
</table>

I put some alert tests in there, and the function IS being called, but fails out when it comes to setting the value of fp.

Can anybody see why this won’t work?

Answer 1

Where is your declaration of fp? You need:

var fp = document.getElementById('fp');

Or:

if (!isNaN(finalPrice)) 
       document.getElementById('fp').value = "$" + finalPrice.toFixed(2); 
else 
       document.getElementById('fp').value = "Error"; 

You also have a weird html input in type finalPrice rather than a regular type.

See this if you want to know why it was working in Firefox. This is a cross browser solution. The way you were doing it works in only newer browsers.