Jump to content

Help With Writing To A Simple Javascript Table

GrippingGrain

By GrippingGrain
in JavaScript

Recommended Posts

GrippingGrain Newbie

GrippingGrain

Posted
Posted

Hi all, I'm working on starting a simple game which should have 16 equal sized boxes (in a 4x4 layout) each with one letter from the alphabet in them. I want every letter to selected to show up twice (so 8 random letter appearing twice in the 16 boxes). Right now though I just need code to get the 16 letters appearing in a 4x4 table. I've been meddling with other people's code to try and get this working, but if any of you could produce a piece of code on your own that would do this it would be really appreciated. Here's two different pieces of code that I've come reasonably close to getting to do what I want: 

<html><head><style type="text/css">body {font-family: arial, verdana, sans-serif;background-color: blue;}table#grid {text-align: center;border: 3px solid;border-color:white grey grey white;border-collapse: collapse;}table#grid td {font-size: .7em;border: 1px solid white;background: #333333; color: white;padding: 2px; margin: 0;padding-left:8px; padding-right:8px;}</style><script type="text/javascript">var ROW = ("ABCDEFGHIJKLMNOP").split(''); document.write('<table id="grid"><tr>'); for(var i=1; i<=16; i++) {if((i-1)%4==0) document.write('</tr><tr>');var cell = Math.ceil(i/4) + ROW[(i-1)%4];document.write("<td>"+i+"<br/>" +cell+"</td>");} document.write('</tr></table>');</script></head><body></body></html>

I got this one to produce a nice 4x4 grid but I don't know how to edit the variables to get one random letter in each box. Alternately I have this: 

<html><head><script type="text/javascript">var pairs = [];function setupGame() {  var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";  for (var x = 1; x<= 8; x++) {	pairs.push(alphabet.substr(Math.floor(Math.random() * alphabet.length), 1));   }  document.getElementById('board').innerHTML	= '<table border="1"><tr><tr><td>'+pairs.join('</td></tr><tr><td>')+'</td></tr></tr><tr><tr><td>'+pairs.join('</td></tr><tr><td>')+'</td></tr></tr></table>';}</script></head><body onLoad="setupGame();"><h1>Letters</h1><div id="board"></div></body></html>

This code produces the 8 random letters repeated twice in a one column, but I need it to display in a 4x4 fashion. I'm sure this is fairly simple for someone better versed in javascript than I, so you will have my gratitude if you lend me a helping hand here.

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted

Just combine the two. If the first one produces the layout you want, use that as your base. Since the second produces your letters, extract the piece that produces those letters and insert it into the first one. This is the part that produces your random letter:pairs.push(alphabet.substr(Math.floor(Math.random() * alphabet.length), 1)); This is the spot you need to place the above snippet:document.write("<td>"+i+"<br/>" +cell+"</td>"); You should be able to figure it out from there. Give it a shot, and if you have problems, post your modified code and tell us what isn't working.

Link to comment
Share on other sites
GrippingGrain Newbie

GrippingGrain

Posted
  • Author
Posted

Thank you ShadowMage, that was very helpful. I've moved forward and removed the excess code I don't need. Now the step I'm on is I can get 16 random letters inside the boxes and looking nice. What I need though 8 letters total displaying twice each in the 4x4 grid. Below is my code with 8 letters displaying, now how can I get all these letters to display twice (and preferably not in the same pattern as the first 8)? Here is my code. 

<html><head><style type="text/css">body {font-family: arial, verdana, sans-serif;background-color: blue;}table#grid {text-align: center;border: 3px solid;border-color:white grey grey white;border-collapse: collapse;}table#grid td {font-size: 2em;border: 1px solid white;background: #333333; color: white;padding: 2px; margin: 0;padding-left:8px; padding-right:8px;}</style><script type="text/javascript">  var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; document.write('<table id="grid"><tr>'); for(var i=1; i<=8; i++) {if((i-1)%4==0) document.write('</tr><tr>');document.write("<td>"+alphabet.substr(Math.floor(Math.random() * alphabet.length), 1) + "</td>"); }  </script></head><body>  </body></html>

Additionally how can I can all of the javascript in my code inside a function without preventing the CSS from showing up? When I use <body onLoad= "setupGame";> the letters will still appear in the right pattern, but without any of the desired formatting.

Link to comment
Share on other sites
JamesB Member

JamesB

Posted
Posted

the fact you need the same letters for the 2nd lot of 8 cells means the letters should probably be stored in an array, like you did before.to output the other 2nd lot of 8 cells, you could make your current for loop run twice with another loop: 

var nums = [];for(var i=1; i<=8; i++) {     nums.push(alphabet.substr(Math.floor(Math.random() * alphabet.length), 1));}for (var i2=1; i2<=2; i2++) {     for(var i=1; i<=8; i++) {         if((i-1)%4==0) document.write('</tr><tr>');         document.write("<td>"+nums[i]+"</td>");     }}

to put the code in a function, you should be able to just have: 

function setupGame() {    // code here}

and the body onload function should have () after it: 

<body onLoad= "setupGame()";>

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted

For the most part, follow JamesB's advice. The only other thing I'm going to suggest is that you ditch the document.write statements and use the technique in the second code snippet in your original post (ie, getElementById). First, add the "board" div to your html:

<div id="board"></div>

Then, you'll need to create a variable to hold the string of HTML that will be inserted into this div to become your table. So, the first document.write line:

document.write('<table id="grid"><tr>');

will become:

var html = '<table id="grid"><tr>';

Also replace the other document.write lines in a similar manner. Except for these you'll have to concatenate the string instead of simply assigning it (ie, use '+=' instead of '='). Then, at the very end of the function, after you've completely finished generating the HTML, you'll need to insert it. Add this line to the very end of the setupGame function:

document.getElementById('board').innerHTML = html;

EDIT: Oh, and as for printing the letters in a different order, you have two options. You can shuffle the array after you print it the first time. Or you can print it the second time using random indexes. We can go over these options after you get it to just print the letters, but feel free to try them out first if you like (but still get the printing working first!).

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...