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

Question

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>

i can't found the restart function(). where is it? – Hanna Rose Aug 05 '21 at 02:24 — Hanna Rose, Aug 05 '21 at 02:24

score 0 · Answer 1 · answered Aug 05 '21 at 02:23

0

I imagine it's because your restart() function is outside of the scope of your Vue application. I'm not familiar with Vue, but you probably need to have restart() be a function within app.methods, and call it just like you're calling the other Vue methods. Which also means you'd probably have to have your restart button within the <div id="app" v-cloak> element. You've placed it outside of the parent Vue element at the moment.

answered Aug 05 '21 at 02:23

1f928

96
6

Yes, that was the first thing I tried, which didn't work, and I ended up moving both `restart()` function and the restart button to different places, the code above is how it ended up – Jack Ng Aug 05 '21 at 02:44

Kirill Savik · Accepted Answer · 2021-08-05T02:56:16.763

0

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");
}

edited Aug 05 '21 at 02:56

answered Aug 05 '21 at 02:39

Kirill Savik

1,228
4
7

Yes, that was very similiar to one of the first ones I've tried, with the same outcome: the button is there, but nothing happens when I click it – Jack Ng Aug 05 '21 at 02:51
Ah, sorry. Please change "onclick" to "@click". – Kirill Savik Aug 05 '21 at 02:56
turn = 'O' should also probably be this.turn ='O'. You'll also need to clear the class names piece-o and piece-x to refresh your board – J.M. Taylor Aug 05 '21 at 02:58

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

2 Answers2