You can see an example of using getElementById and innerHTML here: genSample.html with detailed notes about the example here. The basic idea is that you put a div with an id attribute in your document and use getElementById to get a pointer to that div.
Once you have a pointer to the div, you can set the innerHTML to a string, and the browser will add that HTML to the div just as it would if the string had been typed into the HTML file. The Lesson Notes for the lesson on scripting documents has another example of using getElementById and innerHTML: Document Object Model Notes
var pTag = "<p style='font-weight: bold;'>";Or, you can escape the HTML quotes with back slashes, like this:
var pTag = "<p style=\"font-weight: bold;\">";
Encapsulate your grid-generation code in a function, so that the table can be generated by calling a single function. Your function should have parameters to specify the numbers of rows and columns in the grid.
If you are using innerHTML, I recommend that your function returns an HTML string rather than modifying the document directly. That way the same function can be used to create grids in more than one place in the document. For example, in Battleship you could use the same function to make the grid for the player's ships and the grid for the computer's ships.
Note: Even though the grid-generation function needs to have parameters for the size of the grid, you don't have to make a way for the player to select a grid size. For this assignment it's okay if the function is always called with the same parameters. (For your project you might need to do something different later.)
Patterns made with images or text content do not satisfy this requirement. Also, it's possible to make a checkerboard pattern without generating different class attribute values for different cells (using the nth-child property) but that does not satisfy this requirement because it doesn't involve JS code assigning different class attribute values to different cells of the table.
Be sure you have read the debugging tutorial in the notes for Lesson 3. Then, practice using the Chrome developer tools (or similar tools) with your program for this assignment, including finding error messages in the console, setting breakpoints, and stepping through code.
generating one table cell each time through the inner loop.||20||
Code to generate table HTML is encapsulated in a function with
parameters for the numbers of rows and columns in the grid.
to add the table HTML to the document (or uses createElement)|
checkerboard pattern (or other pattern) in the table|
practiced using Chrome Developer Tools (or other debugging tools).
There are no assigned points for this part of the assignment, but
it's very important.|