TTT

by Zach McCall

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="Chat.css">
    <script src="TTT.js"></script>
    <title>'Tic Tac Toe'</title>
</head>
<body>
<div class="game">

    <button type="button" class="row1 block" name="one"></button>
    <button type="button" class="row1 block" name="two"></button>
    <button type="button" class="row1 block" name="three"></button>
    <br>
    <button type="button" class="row2 block" name="four"></button>
    <button type="button" class="row2 block" name="five"></button>
    <button type="button" class="row2 block" name="six"></button>
    <br>
    <button type="button" class="row3 block" name="seven"></button>
    <button type="button" class="row3 block" name="eight"></button>
    <button type="button" class="row3 block" name="nine"></button>
</div>
</body>
</html>

CSS

.block {
    display:inline-block;
    background-color: azure;
    border:2px solid black;
    font-family: fantasy;
    height:150px;
    width:200px;
    padding-top:5px;
    justify-content: center;
    position: relative;
    text-align:center;
}
body {
    background-color: beige;
}
.game {
    height:500px;
    width:700px;
    background-color: gainsboro;
    margin-left: auto;
    margin-right: auto;
}

/*Add large X to this class for when it is switched on*/
.chosen {
    display:inline-block;
    background-color: red;
    border:2px solid black;
    font-size: 100px;
    font-weight: bolder;
    height:150px;
    width:200px;
    padding-top:5px;
    justify-content: center;
    position: relative;
    text-align:center;
}    
.chosen:before{
    content: "X";
}


.picked {
    display:inline-block;
    background-color: red;
    border:2px solid black;
    font-size: 100px;
    font-weight: bolder;
    height:150px;
    width:200px;
    padding-top:5px;
    justify-content: center;
    position: relative;
    text-align:center;
}    
.picked:before{
    content: "O";
}

JavaScript

var player===1
        
var blocks = document.getElementsByClassName('block');

function turn(){
    if(player===1){
    player-=1;
    winner();
var  buttons= document.getElementsByTagName("button");
console.log(buttons.length);
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function(e) {
        var number=(this.getAttribute('name'));
        var chosenblock=document.getElementsByName(number)[0];
        chosenblock.classList.toggle('chosen');
        chosenblock.value='X';
       // console.log('click!');
    });
}
    }

    else{
        player+=1;
        winner();
    var computer;
computer = function () {
    var computerchoice=Math.floor(Math.random()*(9)+1);
    function compselected(number) {
        //How to make number equal to the id of the selected block?
        var chosenblock = document.getElementsByName(number)[0];
        chosenblock.classlist.toggle('picked');
    }
    if (chosenblock.classList.contains('chosen')){
        return false;
    }

    if (computerchoice >= 0 && computerchoice < 1) {
            compselected('one');
        }
    if (computerchoice >= 1 && computerchoice < 2) {
            compselected('two');
        }
    if (computerchoice >= 2 && computerchoice < 3) {
            compselected('three');
        }
    if (computerchoice >= 3 && computerchoice < 4) {
            compselected('four');
        }
    if (computerchoice >= 4 && computerchoice < 5) {
            compselected('five');
        }
    if (computerchoice >= 5 && computerchoice < 6) {
            compselected('six');
        }
    if (computerchoice >= 6 && computerchoice < 7) {
            compselected('seven');
        }
    if (computerchoice >= 7 && computerchoice < 8) {
            compselected('eight');
        }
    if (computerchoice >= 8 && computerchoice < 9) {
            compselected('nine');
        }
}
    }
}

function winner(){
    var blocks = document.getElementsByClassName('block');
for (var i = 0; i...