JavaScript function not recognized

Question

I am making a tic-tac-toe game in which I have a series of 9 buttons. I change the background image to an X or an O based on the boolean value of variable isX.

I have a div with an id stage which holds all the buttons of class square. I added a listener on the stage and passed it an event parameter. However, the function clickHandler is not recognized. Chrome says:

Uncaught ReferenceError: clickHandler is not defined 2Players.html:38
(anonymous function)

HTML:

<body>
    <div id="stage">

    </div>
</body>

CSS:

#stage{
    width: 400px;
    height: 400px;
    padding: 0px;
    position: relative;
}
.square{
    width: 64px;
    height: 64px;
    background-color: gray;
    position: absolute;
}

JavaScript:

        const ROWS = 3;
        const COLS = 3;
        const GAP = 10;
        const SIZE = 64;
        var stage = document.querySelector("#stage");
        var lotOfButtons = [];

        var winningPatterns = ["123","159","147",
                               "258","357","369",
                               "456","789"];
        var isX = true;
        var player1Pattern = "";
        var player2Pattern = "";

        stage.addEventHandler("click",clickHandler,false);
        prepareBoard();

        function prepareBoard(){
            for(var row = 0;row<ROWS;row++){
            for(var col = 0;col < COLS;col++){
                var square = document.createElement("button");
                square.setAttribute("class","square");
                stage.appendChild(square);
                lotOfButtons.push(square);
                square.style.left = col * (SIZE+GAP) + "px";
                square.style.top = row * (SIZE+GAP) + "px";
            }
        }
        function clickHandler(event){
            if(isX===true){
                event.target.style.backgroundImage = "url(../img/X.PNG)";
                isX = false;
            }else{
                event.target.style.backgroundImage = "url(../img/O.PNG)";
                isX = true;
            }
        }
  }

aside your question, you might benefit from using a spritesheet and just offsetting the background position instead of swapping images. — Kai Qing
– Kai Qing, Commented Apr 25, 2013 at 3:44

Explosion Pills · Accepted Answer · 2013-04-25 03:45:05Z

4

You have some syntax and semantic errors in the code -- possibly more than I caught, but it is in a working state.

You only closed one of the braces in the nested for loops in prepareBoard. This leads to clickHandler being defined inside prepareBoard rather than on window.
It's addEventListener, not addEventHandler.

http://jsfiddle.net/4pgQ8/

answered Apr 25, 2013 at 3:45

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript function not recognized

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related