I'm stuck on createElement onclick function

jswannabe · 11-30-2012, 01:49 AM

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>

jswannabe · 11-30-2012, 02:38 AM

Code:

newfield.onclick=function(){function sumaddexp ()
{
var add1 = document.getElementById("Additional_Expenses_0").value;
var add2 = document.getElementById("Additional_Expenses_1").value;
var add3 = document.getElementById("Additional_Expenses_2").value;
var add4 = document.getElementById("Additional_Expenses_3").value;
var add5 = document.getElementById("Additional_Expenses_4").value;

var subtotal = add1 + add2 + add3 + add4 + add5;
document.getElementById("extrasum").innerHTML = subtotal;

}}

I know it doesn't add to the total like I asked help with but I was trying anything. In this attempt I was trying to get it to subtotal and write into the div. I don't know if I'm failing at getting the value or if I'm not doing the innerHTML part right. I don't know where I'm failing.