Skip to content

Instantly share code, notes, and snippets.

@raorao

raorao/foo.html

Created May 13, 2017 21:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save raorao/fe3ca0f60dbd22b19decfacd48b4491c to your computer and use it in GitHub Desktop.
Save raorao/fe3ca0f60dbd22b19decfacd48b4491c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
foo.html
<html>
<body>
<style>
td {
border: 1px solid black;
width: 40px;
height: 40px;
}
</style>
<table>
<tr>
<td data-x=0 data-y=0></td>
<td data-x=0 data-y=1></td>
<td data-x=0 data-y=2></td>
</tr>
<tr>
<td data-x=1 data-y=0></td>
<td data-x=1 data-y=1></td>
<td data-x=1 data-y=2></td>
</tr>
<tr>
<td data-x=2 data-y=0></td>
<td data-x=2 data-y=1></td>
<td data-x=2 data-y=2></td>
</tr>
</table>
<button> Change Player </button>
<script>
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 = event.target
if(event.target.tagName == "TD") {
triggerChange({currentType: currentType, x: target.dataset.x, y: target.dataset.y})
}
})
document.querySelector("button").addEventListener("click", function() {
currentType = currentType == "X" ? "Y" : "X";
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment