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

Question

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

Try to place script with var board1 below your div id="board1" — Molda, Apr 07 '15 at 14:16
In addition to @Molda's comment, it's because you'll probably have to wait for the page has loaded before calling the scripts. — Kaiido, Apr 07 '15 at 14:18
@Molda I have placed script with var board1 below div of id="board1". But I display nothing. No alert.. just blank space — andika_kurniawan, Apr 07 '15 at 14:23

score 2 · Answer 1 · edited May 23 '17 at 11:53

2

You don't need the entire jQuery library to get this to work, though you may find it helpful for other things. If you don't foresee using jQuery for anything else all you need is setTimeout

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

I accidentally discovered this trick 6 years ago and posted a question that got this informative answer. He did point out that it may not work in IE though perhaps that has changed in the meantime.

edited May 23 '17 at 11:53

Community

1
1

answered Apr 07 '15 at 14:34

Dexygen

12,287
13
80
147

1

Kinda hacky solution, better use window.onload event. – Filip Minx Apr 07 '15 at 14:46
@Python Possibly but window.onload *is* different from dom readiness: http://stackoverflow.com/q/3698200/34806 – Dexygen Apr 07 '15 at 14:49
@GeorgeJempty Yes, you are correct. I am pretty sure, that it will manage to solve the problem at hand though. – Filip Minx Apr 07 '15 at 14:55

score 0 · Accepted Answer · answered Apr 07 '15 at 14:27

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>

I wouldn't say he needs jQuery just for the one function which is `ready`. He might aswell place his script at the bottom of the file or bind the `init` function to a window.onload event. No need to include whole jQuery. — Filip Minx, Apr 07 '15 at 14:45

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

2 Answers2