CodingForums.com - I'm stuck on createElement onclick function

I'm working on learning createElement.
I want to get the createElement input values and include them in the Total Expenses Sum onkeyup.
I want to know how and why your solution works.
Code:








<!DOCTYPE HTML>        





<html>

<head>

<title>javascript Working createElement-4</title>



<style>

body {font-family:arial;}

.extrafield {display:inline;}

label {display:block; width:250px; float:left; text-align:right; margin-right:10px; }

input {text-align:center; width:100px; }

legend {font-size:20px;}

fieldset {margin:20px; }

#text input[type="button"] {margin-left:100px; width:150px; }

#warning {color:red;}

</style>





<script>





function subtotalfunction ()

{

//get the user's data

var km=parseInt(document.getElementById("kilometers").value);

var park=parseInt(document.getElementById("parking").value);

var tol=parseInt(document.getElementById("tolls").value);

var air=parseInt(document.getElementById("airline tickets").value);

var train=parseInt(document.getElementById("train").value);

var bus=parseInt(document.getElementById("bus_taxi").value);

var lod=parseInt(document.getElementById("accommodation").value);

var fb=parseInt(document.getElementById("food_beverage").value);

var kmcalc=km*0.55;

var kmdollar=parseInt(kmcalc);



//convert data to decimal

var kmdollardecimal = kmdollar.toFixed(2);

var parkdecimal = park.toFixed(2);

var toldecimal = tol.toFixed(2);

var airdecimal = air.toFixed(2);

var traindecimal = train.toFixed(2);

var busdecimal = bus.toFixed(2);

var loddecimal = lod.toFixed(2);

var fbdecimal = fb.toFixed(2);



//convert to money

document.getElementById("kmdollars").value = "$" + kmdollardecimal ;

document.getElementById("parking2").value = "$" + parkdecimal;

document.getElementById("tolls2").value = "$" + toldecimal;

document.getElementById("airline_tickets2").value = "$" + airdecimal;

document.getElementById("train2").value = "$" + traindecimal;

document.getElementById("bus_taxi2").value = "$" + busdecimal;

document.getElementById("accommodation2").value = "$" + loddecimal;

document.getElementById("food_beverage2").value = "$" + fbdecimal;



//converting the total

var total=parseInt(document.getElementById("totalexpenses").value);

var totaldecimal = total.toFixed(2);





//summing the fields

document.getElementById("results").innerHTML = kmdollar + park + tol + air + train + bus + lod + fb;

document.getElementById("totalexpenses").value = kmdollar + park + tol + air + train + bus + lod + fb;



//displaying the sum

document.getElementById("totalexpenses2").value = "$" + document.getElementById("totalexpenses").value;



}





//name and id increment variables

var namecounter=0;

var idcounter=0;





//create new input fields



function new_exp_fields()



{



var newfield = document.createElement('input');

newfield.type = "input";

newfield.name = "Additional_Expenses_" + namecounter++;

newfield.id = "Additional_Expenses_" + idcounter++;

newfield.onclick=function () {};





//limit createElement limit additional expenses

if (idcounter > 4)

{

document.getElementById("additional").disabled = true;

document.getElementById("warning").innerHTML = "You may only add 5 additional expenses";

}





//create label for new element

var label = document.createElement("Label");

label.for = "additional";

label.innerHTML="Type in Expense...";





//display new element

document.getElementById("additionalplace").appendChild(label);

document.getElementById("additionalplace").appendChild(newfield);

var mybr=document.createElement('br');

document.getElementById("additionalplace").appendChild(mybr);

}









</script>

</head>











<body>

<form onclick="value=" action="mailto:you@yourprovider.net?subject=TravelExpenseSubmissionForm" method="post" enctype="text/plain"  



id="TravelExpenses" name="TravelExpenses" > 



<fieldset>

<legend>Employee Information</legend>





<label for="employeename">Employee Name</label>

<input id="employeename" name="Employee Name _" type="text"><br/>



<label for="employeenumber">Employee Number</label>

<input id="employeenumber" name="Employee Name _" type="text"><br/>

</fieldset>





<fieldset> 

<legend>Travel Expense Submission Form</legend>





<label for="kilometers">Kilometers</label>

<input id="kilometers" name="kilometers" type="text" maxlength="4" tabindex=1 value=0 placeholder="km" 



onkeyup="subtotalfunction()" >

<input id="kmdollars" name="kmdollars" type="text" placeholder="rate @ $0.55" readonly="readonly"><br/>





<label for="parking">Parking</label>

<input id="parking" name="parking" type="text" value="0" placeholder="input" maxlength=3  tabindex=2 



onkeyup="subtotalfunction()" >

<input id="parking2" name="parking2" type="text" placeholder="output" readonly="readonly"> <br/>



<label for="tolls">Tolls</label>  

<input id="tolls" name="tolls" type="text" value="0" placeholder="input" maxlength=3  tabindex=3 onkeyup="subtotalfunction



()">

<input id="tolls2" name="tolls2" type="text" placeholder="output" readonly="readonly"><br/> 

 

<label for="airline tickets">Airline Tickets</label> 

<input id="airline tickets" name="airline tickets" type="text" value="0" placeholder="input" maxlength=4  tabindex=4 



onkeyup="subtotalfunction()"> 

<input id="airline_tickets2" name="airline tickets2" type="text" placeholder="output" readonly="readonly"><br/> 



<label for="train">Train</label>  

<input id="train" name="train" type="text" maxlength=4  value="0" placeholder="input" tabindex=5  onkeyup="subtotalfunction



()"> 

<input id="train2" name="train2" type="text" placeholder="output"readonly="readonly"><br/> 



<label for="bus-taxi">Bus/Taxi</label>  

<input id="bus_taxi" name="bus_taxi" type="text" maxlength=3  value="0" placeholder="input" tabindex=6 



onkeyup="subtotalfunction()" > 

<input id="bus_taxi2" name="bus_taxi2" type="text" placeholder="output"readonly="readonly"><br/> 



<label for="accommodation">Lodging</label>  

<input id="accommodation" name="accomodation" type="text" maxlength=4  value="0" placeholder="input" tabindex=7 



onkeyup="subtotalfunction()" >

<input id="accommodation2" name="accommodation2" type="text" placeholder="output" readonly="readonly"><br/> 



<label for="food-beverage">Food & Beverage</label>  

<input id="food_beverage" name="food_beverage" type="text" value="0" placeholder="input" maxlength=4 tabindex=8 



onkeyup="subtotalfunction()" > 

<input id="food_beverage2" name="food_beverage2" type="text" placeholder="output" readonly="readonly"> <br/> 







<div id="text">

<input id="additional" name="addfieldbutton" type="button" value="Add new expense field" onclick="new_exp_fields()">

</div>



<div id="additionalplace">

</div>



<div id="warning">

</div>



<div id="extrasum">

</div>



<label for="totalexpenses">Total Expenses</label>  

<input id="totalexpenses" name="totalexpenses" type="text" value="0" placeholder="total" tabindex=9  readonly="readonly" >

<input id="totalexpenses2" name="totalexpenses2" type="text" placeholder="total" readonly="readonly"><br/>



<div id="submit">

<input type="submit" value="Submit">

</div>



<!--Test for sum-->

<div id="results"></div>







</fieldset> 

</form>





<p>

HTML

<ul>

<li>placeholder  - which puts text into an input field but goes away when field active.</li>

<li>readonly - you can make an input field to display only and can not be written into.</li>

</p>





</body>

</html>