I am having 2 divs in html index page. Inside each div i need to call one function from js file

Question

  <div class="well col-lg-12" id="TwoPlayer_9">
 <p>
    <a class="btn btn-primary btn-lg right" id="backButtonTP">Home</a>
</p>    
<button id="new" class="btn btn-primary btn-lg pull-left">New Game</button>

<canvas id="tttBoard"  width="500px" height="500px">Your browser does not seem to support the canvas element. Try Firefox or Chrome!</canvas>
<script>
    window.TicTacToe.drawBoard();
    window.TicTacToe.drawMark(col,row)
</script>
    </div>
    <div class="well col-lg-12" id="TwoPlayer_3">
    <p>
        <a class="btn btn-primary btn-lg right" id="backButtonTP">Home</a>
    </p>    
    <button id="new" class="btn btn-primary btn-lg pull-left">New Game</button>
    <canvas id="tttBoard_Single" width="500px" height="500px">Your browser does not seem to support the canvas element. Try Firefox or Chrome!</canvas>
    <script>
        window.TicTacToe.drawBoard_double();
        doHistory_double();
    </script>
    <div  id="history" style="top:90%;left:18%;position:fixed">
        <div id="histheading">History</div>
            <div id='hist'>
                <canvas id="test"></canvas>
            </div>
         </div>

   </div>





    window.TicTacToe.drawBoard_double = function()
        {

            var elem1 = document.getElementById("tttBoard_Single");
            b = elem1.getContext("2d");



            // Create a new path, this lets us specify new strokeStyles? I think?
            b.beginPath();
            b.lineWidth = 3;
            // Vert
            b.moveTo(166,0);
            b.lineTo(166,500);
            b.moveTo(332,0);
            b.lineTo(332,500);
            // Horiz
            b.moveTo(0,166);
            b.lineTo(500,166);
            b.moveTo(0,332);
            b.lineTo(500,332);
            // Set the line color 
            b.strokeStyle = "#000000";
            // And now we stroke!
            b.stroke();


            // Set click event
            elem1.addEventListener("click", window.TicTacToe.boardClick_double, false);

            // Player 0's turn!
            window.TicTacToe.PlayerTurn = 0; // 0 = X, 1 = O .. I know, fun isn't it!
        }


    window.TicTacToe.drawBoard = function()
        {
            var elem = document.getElementById("tttBoard");
            b = elem.getContext("2d");
            // Create a new path, this lets us specify new strokeStyles? I think?
            b.beginPath();
            b.lineWidth = 3;

            //Vert
            b.moveTo(55,0);
            b.lineTo(55,500);
            b.moveTo(110,0);
            b.lineTo(110,500);
                    b.moveTo(165,0);
            b.lineTo(165,500);
            b.moveTo(220,0);
            b.lineTo(220,500);
                    b.moveTo(275,0);
            b.lineTo(275,500);
            b.moveTo(330,0);
            b.lineTo(330,500);
                    b.moveTo(385,0);
            b.lineTo(385,500);
            b.moveTo(440,0);
            b.lineTo(440,500);


            //Horiz
                    b.moveTo(0,55);
            b.lineTo(500,55);
            b.moveTo(0,110);
            b.lineTo(500,110);
                    b.moveTo(0,165);
            b.lineTo(500,165);
                    b.moveTo(0,220);
            b.lineTo(500,220);
                    b.moveTo(0,275);
            b.lineTo(500,275);
                    b.moveTo(0,330);
            b.lineTo(500,330);
                    b.moveTo(0,385);
            b.lineTo(500,385)
                    b.moveTo(0,440);
            b.lineTo(500,440);


            // Set the line color
            b.strokeStyle = "#000000";
            // And now we stroke!
            b.stroke();

            // Set click event
            elem.addEventListener("click", window.TicTacToe.boardClick, false);

            // Player 0's turn!
            window.TicTacToe.PlayerTurn = true; // 0 = X, 1 = O .. I know, fun isn't it!
        }

One Js file is for 3 x 3 board and another Js is for 9 x 9. Both were having same function names. But i changed the function names , even it is showing error as object has no method drawBoard_double and also anonymous function.How to solve this problem.I have given my javascript functions also. Each function name is different but variables used are same.Give me some suggesstions to solve this.

Answer 1

I'm not sure if this helps but I read that you had changed function names to be different for the 3x3 and 9x9 boards. Since JS is all global, maybe you could try name spacing your functions. So Var nineByNine ={9x9 js code} and var threeByThree ={3x3 is code}. Then you would be able to use functions that have the same names/variables. So if you had a function draw in both versions, you could write nineByNine.draw() and threeByThree.draw().