Ciao a tutti,

come da oggetto ho il problema NaN nel risultato finale, segue il codice del file js e di quello html. Qualcuno saprebbe aiutarmi cortesemente?

Grazie mille
codice:
function calcolaCosto(){
	var costoB = document.getElementById("bianco")*0.03;
	var costoR = document.getElementById("rosso")*0.30;
	costo = costoB + costoR;
	return costo;
} 


function calculateTotal()
{
    
    var tot = calcolaCosto();
    
    
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Preventivo € "+tot;


}


function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';

}
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>ciao</title>
    <script type="text/javascript" src="js/formcalculations.js"></script>
</head>
<body onload='hideTotal()'>
    <div id="wrap">
        <form action="" id="prev" onsubmit="return false;">
        <div>
            <div class="cont_order">
               <fieldset>
                <legend>Calcola il preventivo</legend>
                
             	bianco<br/>
				<input type="number" id="bianco" name="white" oninput="calculateTotal()" /><br/>
				rosso<br/>
				<input type="number" id="rosso" name="red" oninput="calculateTotal()" /><br/>
                                <br/>
                
                <div id="totalPrice"></div>
                
                </fieldset>
            </div>
            
 
        </div>  
       </form>
	</div><!--End of wrap-->


</body>

</html>