无法显示板，而我使用 chessboard.js 时 ID 相同

Question

我想显示来自 chessboardjs.com 的国际象棋。但是我不能，而我遵循文档。而 ID 相同。

<html>
<head>
    <!--
        UTF-8 (U from Universal Character Set + Transformation Format—8-bit[1]) is a character encoding capable of encoding all possible characters
     -->
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/chessboard-0.2.0.css"/>
    <script type="text/javascript" src="js/chessboard-0.2.0.js" > </script>
    <script type="text/javascript">
        var board1 = new ChessBoard('board1', 'start');
    </script>
</head>
<body>
    <div id="board1" style="width: 400px"></div>    
</body>

ID相同。即'board1'。我遵循文档中的规则...... link

但是，我收到错误消息。错误是棋盘错误1002：id为"board1"的元素在DOM.[=17=中不存在]

然后，我阅读了有关错误 1002 的文档。它说..

ChessBoard 无法通过 document.getElementById 找到您的元素。请注意，如果您将字符串作为第一个参数传递给 ChessBoard() 构造函数，它应该是 DOM id 的值，而不是 CSS 选择器（即："board"，而不是"#board").

link

Answer 1

您需要 jquery 才能完成这项工作。

<html>
<head>
    <!--
        UTF-8 (U from Universal Character Set + Transformation Format—8-bit[1]) is a character encoding capable of encoding all possible characters
     -->
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/chessboard-0.3.0.css"/>
    <script type="text/javascript" src="js/chessboard-0.3.0.js" > </script>
    <script src="https://code.jquery.com/jquery-1.10.1.js"></script>
</head>
<body >
    <div id="board1" style="width: 400px"></div>  

</body>
<script type="text/javascript">

var init = function() {

//--- start example JS ---
var board = new ChessBoard('board1');
//--- end example JS ---

}; // end init()
$(document).ready(init);
</script>

</html>

Answer 2

你不需要整个 jQuery 库来让它工作，尽管你可能会发现它对其他事情有帮助。如果您没有预见到将 jQuery 用于其他任何事情，您只需要 setTimeout

setTimeout(function() {
    var board1 = new ChessBoard('board1', 'start');
}, 0);

6年前无意中发现了这个技巧，发了个问题得到了this informative answer。他确实指出它可能无法在 IE 中工作，尽管这可能同时发生了变化。

无法显示板，而我使用 chessboard.js 时 ID 相同

Can't display board whereas the ID is same when I use chessboard.js

javascript

chessboard.js