Skip to content

Instantly share code, notes, and snippets.

Created May 13, 2017 21:03
What would you like to do?
td {
border: 1px solid black;
width: 40px;
height: 40px;
<td data-x=0 data-y=0></td>
<td data-x=0 data-y=1></td>
<td data-x=0 data-y=2></td>
<td data-x=1 data-y=0></td>
<td data-x=1 data-y=1></td>
<td data-x=1 data-y=2></td>
<td data-x=2 data-y=0></td>
<td data-x=2 data-y=1></td>
<td data-x=2 data-y=2></td>
<button> Change Player </button>
currentType = "X"
triggerChange = function(opts) {
var currentType = opts.currentType
var x = opts.x
var y = opts.y
element = document.querySelector(`td[data-x='${x}'][data-y='${y}']`)
element.innerHTML = currentType
declareWinner = function() {
alert(`${currentType} won!`)
document.querySelector("table").addEventListener("click", function(event) {
var target =
if( == "TD") {
triggerChange({currentType: currentType, x: target.dataset.x, y: target.dataset.y})
document.querySelector("button").addEventListener("click", function() {
currentType = currentType == "X" ? "Y" : "X";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment