Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Restart Game Button
- var restart = document.querySelector('#b');
- // Grab all the squares
- var squares = document.querySelectorAll("td");
- var grid = document.querySelector("tr")
- var x = document.getElementById("change").innerHTML;
- // Clear Squares Function
- function clearBoard() {
- for (var i = 0; i < squares.length; i++) {
- squares[i].textContent = '';
- }
- }
- restart.addEventListener('click',clearBoard)
- // Create a function that will check the square marker
- var header = document.querySelector("h1")
- var tablecolor = document.querySelector("td")
- // Then you can interface with the object.
- // Interface with the style.
- //You will see a ton of options show up!
- //header.style.color = 'blue'
- //tablecolor.style.color = 'blue'
- //grid.style.color = 'red'
- // Now let's connect it to the script to
- // change it once every second to a random color!
- // Random Color Function:
- // http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
- function getRandomColor(){
- var letters = "0123456789ABCDEF";
- var color = '#';
- for (var i = 0; i < 6; i++) {
- color += letters[Math.floor(Math.random()*16)];
- }
- return color
- }
- function changeMarker(){
- if(this.textContent === ''){
- this.textContent = 'X';
- // console.log(marker)
- }else if (this.textContent === 'X') {
- this.textContent = 'O';
- }else {
- this.textContent = '';
- }
- };
- // Simple function for clarity
- function changeHeaderColor(){
- colorInput = getRandomColor()
- header.style.color = colorInput;
- }
- function changeBorderColor() {
- var table = document.getElementById("table_row").getElementsByTagName("td");
- for(var i=0; i<table.length; i++) {
- var td = table[i];
- td.style.borderColor = getRandomColor();
- }
- }
- // Use a for loop to add Event listeners to all the squares
- for (var i = 0; i < squares.length; i++) {
- squares[i].addEventListener('click', changeMarker);
- squares[i].style.color = getRandomColor()
- }
- function changeXColor(){
- colorInput = getRandomColor();
- x.style.color = colorInput;
- }
- setInterval("changeHeaderColor()",300);
- setInterval("changeBorderColor()",305);
- setInterval("changeXColor()",300);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement