Exercise 10.7

This is Exercise 10.7, lecture on traversing DOM with Javascript, used in the course IDATA2301 Web technologies at NTNU, campus Aalesund.

Go back to exercise list.

Purpose

The purpose of the exercise is to learn how you can select more than one element and traverse the children.

Instructions

  1. Create an HTML document with a 3x3 grid container. An opportunity to remember how CSS grids work ;).
  2. Put 9 div elements inside it.
  3. For even div elements add class="even" (div number 2, 4, …, 8), for odd elements (div number 1, 3, …, 9) add class="odd".
  4. Write a Javascript code (execute it when the page is loaded) which sets text to "X" for all odd elements (those with class="odd") and sets text to "O" for all elements with class="even".
  5. Extra challenge: find out how you can do the same even if you don't assign any classes to the nine divs. I.e., you can access odd and even child elements separately, with specific selectors. Hint: how would you access those in CSS?

It should look something like this in the end:

Tic tac toe with X on diagonals and O in other places

Solution

You can find a solution here.