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 blocks = document.getElementsByClassName('block');

var player === 1;
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');
                // 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...