Why isn’t my restart button working? (Tic tac toe game)

So I want to make a tic tac toe game with html and script javascript, and my reset button doesn’t seem to work, everything else seems to be working well, can anyone tell me what’s wrong here?

I’ve tried moving the restart() function into the body, right after the button, and anywhere else I think possible, and changed the codes in the restart function to almost everything I think works and could be possible, but when I click the button nothing happens

<!DOCTYPE html>
<html>
<head>
    <title>Tictactoe Game</title>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }

        td {
            background: #DDD;
            width: 50px;
            height: 50px;
        }

        .piece-o {
            margin: auto;
            width: 30px;
            height: 30px;
            border: 3px solid #ff8080;
            border-radius: 50%;
        }

        .piece-x {
            margin: auto;
            width: 30px;
            height: 30px;
            background: linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#0099ff 45%,#0099ff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%), linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#0099ff 45%,#0099ff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%);
        }
    </style>
    <script type="text/javascript">
        function restart() {
            for (i = 0; i <= 2; i++){
                for (j = 0; j <= 2; j++){
                    this.game[i][j] = ' '
                }
            }
        }
    </script>
</head>
<body>
    <div id="app" v-cloak>
        <p>Current Player: <i :class="turn == 'O' ? 'far fa-circle' : 'fas fa-times'"></i></p>
        <table>
            <tr v-for="(row, rowKey, index) in game" :key="rowKey">
                <td v-for="(col, colKey, index) in row" :key="colKey" @click="click(rowKey, colKey)">
                    <div v-if="col" :class="'piece-'+col.toLowerCase()"></div>
                </td>
            </tr>
        </table>
    </div>
    <input type="button" onclick=restart() value="Restart">
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                turn: 'O',
                game: [
                    ['', '', ''],
                    ['', '', ''],
                    ['', '', '']
                ]
            },
            methods: {
                click(row, col) {
                    if (this.game[row][col] != '') {
                        alert('Please select empty slot.')
                        return
                    }

                    this.game[row].splice(col, 1, this.turn);
                    this.calcResult()
                },
                calcResult() {

                    var game = this.game
                    var turn = this.turn

                    // Victory Condition
                    if ((this.game[0][0] == this.game[0][1] && this.game[0][0] == this.game[0][2] && this.game[0][0] != '')
                        || (this.game[1][0] == this.game[1][1] && this.game[1][0] == this.game[1][2] && this.game[1][0] != '')
                        || (this.game[2][0] == this.game[2][1] && this.game[2][0] == this.game[2][2] && this.game[2][0] != '')
                        || (this.game[0][0] == this.game[1][0] && this.game[0][0] == this.game[2][0] && this.game[0][0] != '')
                        || (this.game[0][1] == this.game[1][1] && this.game[0][1] == this.game[2][1] && this.game[0][1] != '')
                        || (this.game[0][2] == this.game[1][2] && this.game[0][2] == this.game[2][2] && this.game[0][2] != '')
                        || (this.game[0][0] == this.game[1][1] && this.game[0][0] == this.game[2][2] && this.game[0][0] != '')
                        || (this.game[0][2] == this.game[1][1] && this.game[0][2] == this.game[2][0] && this.game[0][2] != '')
                    ) {
                        alert('Player ' + this.turn + ' is the winner!');
                        return;
                    }

                    // Draw condition
                    if (this.game[0][0] != '' && this.game[0][1] && this.game[0][2] && this.game[1][0] && this.game[1][1]
                        && this.game[1][2] && this.game[2][0] && this.game[2][1] && this.game[2][2]) {
                        alert('Draw!');
                        return;
                    }

                    // Next player turn
                    this.turn = this.turn == 'O' ? 'X' : 'O'
                }
            }
        })
    </script>
</body>
</html>

Answer

You can change code like this.

<div id="app" v-cloak>

    ...

    </table>
    <input type="button" @click="restart()" value="Restart">
</div>

And add restart function to Vue methods because you have to use “game” data of Vue.

...
},
restart() {
    for (i = 0; i <= 2; i++){
        for (j = 0; j <= 2; j++){
            this.game[i][j] = ''
        }
    }
    turn = 'O';
    alert("Restart");
}

Advertisement

Answer