嵌入棋盘时遇到问题.js

Trouble embedding chessboard.js

本文关键字：遇到 问题 js      更新时间：2023-09-26

我想利用棋盘.js上提供的精美棋盘。但是，下载文件夹并输入主页上提供的代码后，它似乎没有执行任何操作。

除了链接到文件夹之外，还需要什么吗？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ask A GM</title>
<link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.css">
<link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.min.css">
<script type="text/javascript" src="chessboard-0.3.0.js"></script>
<script type="text/javascript" src="chessboard-0.3.0.min.js"></script>


</head>
<body>
<div id="board2" style="width: 400px"></div>
<input type="button" id="startBtn" value="Start" />
<input type="button" id="clearBtn" value="Clear" />
<script>
var board2 = ChessBoard('board2', {
  draggable: true,
  dropOffBoard: 'trash',
  sparePieces: true
});
$('#startBtn').on('click', board2.start);
$('#clearBtn').on('click', board2.clear);
</script>
</body>
</html>

你缺少jQuery，你应该把你的javascript放在一个文档就绪的函数中，如下所示：

http://jsbin.com/mapenefesi/edit?html,css,js,output

  $(function(){
    var board2 = ChessBoard('board2', {
      draggable: true,
      dropOffBoard: 'trash',
      sparePieces: true
    });
    $('#startBtn').on('click', board2.start);
    $('#clearBtn').on('click', board2.clear);
  });

我不确定您是否想要.css和.min.css以及相同资源的.js和.min.js引用。

另外，由于您没有引用jQuery（如其他一些答案中所述），因此您需要更改JavaScript...

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ask A GM</title>
    <link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.min.css">
    <script type="text/javascript" src="chessboard-0.3.0.min.js"></script>
</head>
<body>
    <div id="board2" style="width: 400px"></div>
    <input type="button" id="startBtn" value="Start" />
    <input type="button" id="clearBtn" value="Clear" />
    <script>
        var board2 = ChessBoard('board2', {
            draggable: true,
            dropOffBoard: 'trash',
            sparePieces: true
        });
        document.getElementById('startBtn').click = function() { board2.start; };
        document.getElementById('clearBtn').click = function() { board2.clear; };
    </script>
</body>
</html>

你似乎正在使用jQuery选择器（例如 $('#startBtn') ），不包括 jQuery 库 https://jquery.com/。尝试包括...

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

相关文章：