Search code examples
javascriptchessboard.js

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

I want to display chess from chessboardjs.com. But I can't whereas I follow documentation. And whereas the ID is same.

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

The id is same. It is 'board1'. I follow the rules from the documentation... link enter image description here

But, I get error. The error is chessboard error 1002: element with id "board1" does not exist in the DOM.

enter image description here

Then, I read documentation about error 1002. It says..

ChessBoard could not find your element with document.getElementById. Please note that if you pass a string as the first argument to the ChessBoard() constructor it should be the value of a DOM id, not a CSS selector (ie: "board", not "#board").

link

enter image description here

Solution

  • You need jquery to make this work. 

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