JSFiddle - React, Tailwind, and code Playground

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: 25px;
    font-weight: bolder;
    height:150px;
    width:200px;
    padding-top:5px;
    justify-content: center;
    position: relative;
    text-align:center;
    .chosen:before{
    content: "X"
}
}

JavaScript

var blocks = document.getElementsByClassName('block');
for (var i = 0; i < blocks.length; i++) {
    var text = document.createTextNode("Choose Me!");
    blocks[i].appendChild(text);
}

var  buttons= document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
        var number=(element.attr('name'));
        document.getElementsByName(number).onclick
        var chosenblock=document.getElementsByName(number);
        chosenblock.classList.toggle('chosen');
    });
}


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);
        chosenblock.classlist.toggle('chosen');
        text.parentNode.removeChild(text);
    }
    if (chosenblock.classList.contains('chosen'){
        return false;
    }

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


}

/*
 I'm trying to turn off one class with a click and turn on another
 in order to show that the square has been clicked
 */