Outputting javascript variable into html table [duplicate]

Question

I'm having problems figuring out how to output a javascript variable into a table. My javascript variables are written in this function. How do I take these variables out and display them into a table?

function displayTotal(){

var beforenoonprice = 6.00; // CHANGE THE PRICE OF THE BEFORE NOON TICKET
var matineeprice = 8.50; // CHANGE THE PRICE OF THE MATINEE TICKET
var seniorprice = 9.50; // CHANGE THE PRICE OF THE SENIOR TICKET
var militaryprice = 9.00; // CHANGE THE PRICE OF THE MILITARY TICKET
var studentdayprice = 7.50; // CHANGE THE PRICE OF THE STUDENT DAY TICKET
var seniordayprice = 6.00; // CHANGE THE PRICE OF THE SENIOR DAY TICKET
var adultprice = 10.50; // CHANGE THE PRICE OF THE ADULT TICKET
var childprice = 7.50; // CHANGE THE PRICE OF THE CHILD TICKET
var threeDprice = 3.50; // CHANGE THE PRICE OF THE REGULAR 3D PRICE
var imaxPrice = 4.50; // CHANGE THE PRICE OF THE IMAX TICKET
var imax3dPrice = 5.50; // CHANGE THE PRICE OF THE IMAX 3D TICKET

//PRICE CHANGE EDIT ENDS HERE

var beforenoon = Number(document.getElementById('beforeNoon').value) || 0;
var beforenooncost = beforenoon * beforenoonprice;
var matinee = Number(document.getElementById('matinee').value) || 0;
var matineecost = matinee * matineeprice;
var senior = Number(document.getElementById('seniorTicket').value) || 0;
var seniorcost = senior * seniorprice;
var Military = Number(document.getElementById('militaryTicket').value) || 0;
var militarycost = Military * militaryprice;
var StudentDay = Number(document.getElementById('studentdayTicket').value) || 0;
var studentdaycost = StudentDay * studentdayprice;
var seniorDay = Number(document.getElementById('seniordayTicket').value) || 0;
var seniordaycost = seniorDay * seniordayprice;
var Adult = Number(document.getElementById('adultTicket').value) || 0;
var adultcost = Adult * adultprice
var child = Number(document.getElementById('childTicket').value) || 0;
var childcost = child * childprice;
var threeD = Number(document.getElementById('threed').value) || 0;
var threeDcost = threeD * threeDprice;
var Imax = Number(document.getElementById('imax').value) || 0;
var imaxCost = Imax * imaxPrice;
var Imax3d = Number(document.getElementById('imax3d').value) || 0;

var imax3dCost = Imax3d * imax3dPrice;

var total = childcost+adultcost+militarycost+seniorcost+studentdaycost+seniordaycost+threeDcost+imaxCost+imax3dCost+beforenooncost+matineecost;

document.getElementById('calculate').innerHTML = total.toFixed(2);

}

Here's the table

<div id="priceUpdateTable">
             <table border="1" style="width:500px" >



<tr>
<td height="30">Price Type</td>
  <td>Current Price</td>
  <td>New Price</td>        
</tr>
<tr>
<td height="30">Before Noon</td>
  <td><script>document.write(beforenoonprice);</script></td>
  <td>nP</td>       
</tr>
<td height="30">Matinee</td>
  <td>cP</td>
  <td>nP</td>       
</tr>
<td height="30">Adult</td>
  <td>cP</td>
  <td>nP</td>       
</tr>
<td height="30"> Child</td>
  <td>cP</td>
  <td>nP</td>       
</tr>
<td height="30">Senior</td>
  <td>cP</td>
  <td>nP</td>       
</tr>
<td height="30">Military</td>
  <td>cP</td>
  <td>nP</td>       
</tr>
<td height="30">Senior Day</td>
  <td>cP</td>
  <td>nP</td>       
</tr>
<td height="30">Student Day</td>
  <td>cP</td>
  <td>nP</td>       
</tr>
</table>
</div>

If you can, I would definitely consider a templating framework like Knockout for this type of work knockoutjs.com — TGH
– TGH, Commented Jul 16, 2014 at 2:31
I'm trying to pull a variable from a specific function. In this case displayTotal(). I haven't seen any links on specifically pulling variables from functions and outputting them — user3814247
– user3814247, Commented Jul 16, 2014 at 2:35
Your function either needs to return those variables, so other JS code can use them, or do the setting inside the function, which can be found in the other answer I linked. — Busches
– Busches, Commented Jul 16, 2014 at 2:40
You should probably create complete <tr> element in function and append to the table. — Ranjan Kumar
– Ranjan Kumar, Commented Jul 16, 2014 at 2:45

user2938543 · Accepted Answer · 2014-07-16 02:47:28Z

0

You can simply document.write() the variable names in the table.

For example:

<td><script>variable name to print goes here</script></td>

answered Jul 16, 2014 at 2:47

user2938543

3271 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Outputting javascript variable into html table [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related