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 enter image description here

但是，我得到了错误。错误是 棋盘错误1002：DOM中不存在ID为“board1”的元素。

enter image description here

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

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

link

enter image description here

Answer 1

您不需要整个jQuery库来实现这一点，尽管您可能会发现它对其他事情很有帮助。如果您没有预见到使用jQuery，那么您需要的只是setTimeout

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

我在6年前意外地发现了这个伎俩并发布了一个this informative answer的问题。他确实指出它可能在IE中不起作用，虽然可能在此期间发生了变化。

Answer 2

你需要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>

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

2 个答案: