i'm trying to dynamically display a table and click a button to re-generate the numbers. i got it to where it displays correctly at the load, and the numbers can regenerate at the button click, but the formatting is lost. is there any quick fixes to this? i know there are better ways to go about doing this, but please help me solve this problem based on what i already have //create table function makeTable(lotto) { var random = Math.floor(Math.random()*40 + 1) //sets variables for random numbers to generate var random2 = Math.floor(Math.random()*40 + 1) var random3 = Math.floor(Math.random()*40 + 1) var random4 = Math.floor(Math.random()*40 + 1) var random5 = Math.floor(Math.random()*40 + 1) var random6 = Math.floor(Math.random()*40 + 1) document.getElementById("tableSpan").innerHTML = '<table border="1" id="lotto">'; var caption=document.getElementById('lotto').createCaption(); caption.innerHTML="bleh!"; var x=document.getElementById('lotto').insertRow(0); var cell1=x.insertCell(0); var cell2=x.insertCell(1); var cell3=x.insertCell(2); var cell4=x.insertCell(3); var cell5=x.insertCell(4); var cell6=x.insertCell(5); cell1.innerHTML='<td class = "norm">'+ random +'</td>'; cell2.innerHTML='<td class = "norm">'+ random2 +'</td>'; cell3.innerHTML='<td class = "norm">'+ random3 +'</td>'; cell4.innerHTML='<td class = "norm">'+ random4 +'</td>'; cell5.innerHTML='<td class = "norm">'+ random5 +'</td>'; cell6.innerHTML='<td class = "kicker">'+ random6 +'</td>'; } function printNumbers(){ var tbl = document.getElementById("lotto"); var row = tbl.rows[0]; lim = row.cells.length; for(i=0; i<lim; i++){ row.cells[i].innerHTML = Math.floor(Math.random()*40 + 1); } } Code (markup): HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>java table</title> <link rel="stylesheet" type="text/css" href="csjsMain.css" media="screen" /> </head> <body onload="makeTable('lotto');"> <div id="container"> <div id="header"> <h1>Hello</h1> </div> <div id="content"> <span id="tableSpan"></span> <input type="button" value="Re-generate Numbers" onclick="printNumbers('lotto');" /> </div> <div id="footer"> bleh </div> <script type="text/javascript" src="js2.js"> </script> </div> </body> </html> Code (markup): CSS @charset "utf-8"; /* CSS Document */ #header h1 { text-align:center; } body { margin: .5in; background-color: white; font: normal 10px Verdana,sans-serif; color:black; } #lotto { width:33%; border:1px; border-color:black; padding:3px; margin-left:auto; margin-right:auto; font-size:14px; } .norm { font-size:14pt; font-family:"Times New Roman", Times, serif; color:black; background-color:white; } .kicker { color:white; background-color:red; font-family:Arial, Helvetica, sans-serif; font-size:16pt; font-weight:bold; } /* Links */ a:link {color: blue;} a:visited {color: purple;} a:active {color:#0099FF;} a:hover {color:#FFFFFF; background-color:#000000;} Code (markup):
change printNumbers function as follows.. function printNumbers() { var tbl = document.getElementById("lotto"); var row = tbl.rows[0]; lim = row.cells.length; for(i=0; i<lim; i++) { row.cells[i].innerHTML = '<td class = "kicker">' + Math.floor(Math.random()*40 + 1) + '</td>'; } } Code (markup):