String contained in variable will not display in table

Hi, I’m having trouble displaying a String that is stored in an array called board. The String “boo” is stored in an array called board in index [0] it displays when interpolated inside the <h3> tags but not within the html table of the code below. Thanks for taking a look.

   $('.playScreen').html('<h3>Tic Tac Toe '+board[0]+'</h3><br><table><tr><td class="box1">' +board[0]+ '</td><td class="box2">boo</td><td class="box3"></td></tr><tr><td class="box4"></td><td class="box5"></td><td class="box6"></td></tr><tr><td class="box7"></td><td class="box8"></td><td class="box9"></td></tr></table>');

With this code the first board[0] inside the <h3> displays
The second board[0] does not display inside the first <td>
The string ‘boo’ displays inside the next


I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


1 Like

I don’t have all your html or css or JavaScript code, so I just created a div in my html section which looks like this:

<div class="playScreen"></div>

I then created a board array with the following:

var board = ['boo','woo'];

When I run the code you posted, I see the following:

so it would seem your code is working (both board[0]'s are showing “boo”).

If this is not what you are seeing, then please post a link to your project so we can take a look at the entire code.

Hi Randel, thanks for editing and looking at my code. Here is a link to my codepen project

So are you still having trouble?

Yes, the board[0] that contains the string “boo” is not displaying in my Tic Tac Toe grid

It is in your CSS definition for the box1 class. You did not specify a font-size, so the table default you specified of 0px is being used which will not allow it to show in the table cell.

Awesome! thanks again for looking. I didn’t even consider the css thought it was an error with my jQuery.

Also, you could greatly reduce the number of lines in your CSS code for your boxes by doing the following instead. The first part sets the properties for all the boxes which are the same. Then, the 2nd and 3rd parts sets only the additional borders needed for the applicable boxes.

.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9 {
  width: 150px;
  height: 150px;
  text-align: center;
  line-height: 0px;
  font-size: 100px;  

.box1, .box2, .box4, .box5, .box7, .box8 {
  border-right: 5px black solid;

.box4, .box5, .box7, .box8, .box6, .box9 {
  border-top: 5px black solid;

Wow! never knew you could do that. You’re right that would greatly reduce my code.