javascript - 我在 html 索引页中有 2 个 div。在每个 div 中我需要从 js 文件调用一个函数

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!
        }

一个 Js 文件用于 3 x 3 板，另一个 Js 文件用于 9 x 9。两者具有相同的函数名称。但我更改了函数名称，即使它显示错误，因为对象没有方法drawBoard_double，也没有匿名函数。如何解决这个问题。我也给出了我的javascript函数。每个函数名称不同，但使用的变量相同。请给我一些解决此问题的建议。

Answer 1

我不确定这是否有帮助，但我读到您已将 3x3 和 9x9 板的函数名称更改为不同的。由于 JS 是全局的，也许你可以尝试在函数中使用 namespace 。所以 Var nineByNine ={9x9 js code} 和 var ThreeByThree ={3x3 is code}。然后您就可以使用具有相同名称/变量的函数。因此，如果您在两个版本中都有一个函数 draw，您可以编写 nineByNine.draw() 和 ThreeByThree.draw()。