Why isn't my button changing from "1" to "X"?

February 19, 2024

I am developing a small tic tac toe project to further my knowledge in javascript. If someone could take a look and figure out why my button text is not changing from 1 to X that would be greatly appreciated. The console says it can not set properties of null. I am still new and don’t really understand what that means yet. I would assume it can’t change the property because it can’t detect anything.

function changeX(buttonType){
    document.querySelector(buttonType).value = "X";
}

body {
    margin: 0;
}

#header {
    background-color: black;
    color: white;
    font-size: 40px;
    height: 50px;
    text-align: center;
}

.container1 {
    margin: 200px auto;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    width: 450px;
}

.but1 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.but1:hover {
    background-color: rgb(245, 245, 245);
}

.but2 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: none;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.but2:hover {
    background-color: rgb(245, 245, 245);
}

.but3 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: none;
    border-left: 1px solid black;
    border-right: none;
    border-bottom: 1px solid black;
}

.but3:hover {
    background-color: rgb(245, 245, 245);
}

.but4 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: none;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.but4:hover {
    background-color: rgb(245, 245, 245);
}

.but5 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.but5:hover {
    background-color: rgb(245, 245, 245);
}

.but6 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: none;
    border-bottom: 1px solid black;
}

.but6:hover {
    background-color: rgb(245, 245, 245);
}

.but7 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: none;
    border-right: 1px solid black;
    border-bottom: none;
}

.but7:hover {
    background-color: rgb(245, 245, 245);
}

.but8 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: none;
}

.but8:hover {
    background-color: rgb(245, 245, 245);
}

.but9 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: none;
    border-bottom: none;
}

.but9:hover {
    background-color: rgb(245, 245, 245);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tic Tac Toe Project</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <section>
            <header id="header">
                Tic Tac Toe
            </header>
        </section>
        <section>
            <div class="container1">
                <button type="button" class="but1" onclick="changeX('.but1')">1</button>
                <button type="button" class="but2">2</button>
                <button type="button" class="but3">3</button>
                <button type="button" class="but4">4</button>
                <button type="button" class="but5">5</button>
                <button type="button" class="but6">6</button>
                <button type="button" class="but7">7</button>
                <button type="button" class="but8">8</button>
                <button type="button" class="but9">9</button>
            </div>
        </section>
        <script src="board.js"></script>
    </body>
</html>

>Solution :

Two issues:

You’re using the selector but1, which would be looking for a <but1> element. You forgot the period to indicate a class: .but1
You’re setting the .value of the button, but your goal is to update its .textContent instead.

When both are corrected:

function changeX(buttonType){
    document.querySelector(buttonType).textContent = "X";
}

body {
    margin: 0;
}

#header {
    background-color: black;
    color: white;
    font-size: 40px;
    height: 50px;
    text-align: center;
}

.container1 {
    margin: 200px auto;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    width: 450px;
}

.but1 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.but1:hover {
    background-color: rgb(245, 245, 245);
}

.but2 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: none;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.but2:hover {
    background-color: rgb(245, 245, 245);
}

.but3 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: none;
    border-left: 1px solid black;
    border-right: none;
    border-bottom: 1px solid black;
}

.but3:hover {
    background-color: rgb(245, 245, 245);
}

.but4 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: none;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.but4:hover {
    background-color: rgb(245, 245, 245);
}

.but5 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.but5:hover {
    background-color: rgb(245, 245, 245);
}

.but6 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: none;
    border-bottom: 1px solid black;
}

.but6:hover {
    background-color: rgb(245, 245, 245);
}

.but7 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: none;
    border-right: 1px solid black;
    border-bottom: none;
}

.but7:hover {
    background-color: rgb(245, 245, 245);
}

.but8 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: none;
}

.but8:hover {
    background-color: rgb(245, 245, 245);
}

.but9 {
    font-size: 40px;
    height: 150px;
    width: 150px;
    background-color: transparent;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: none;
    border-bottom: none;
}

.but9:hover {
    background-color: rgb(245, 245, 245);
}

<section>
    <header id="header">
        Tic Tac Toe
    </header>
</section>
<section>
    <div class="container1">
        <button type="button" class="but1" onclick="changeX('.but1')">1</button>
        <button type="button" class="but2">2</button>
        <button type="button" class="but3">3</button>
        <button type="button" class="but4">4</button>
        <button type="button" class="but5">5</button>
        <button type="button" class="but6">6</button>
        <button type="button" class="but7">7</button>
        <button type="button" class="but8">8</button>
        <button type="button" class="but9">9</button>
    </div>
</section>