Невозможно отобразить плату, тогда как идентификатор такой же, когда я использую chessboard.js

Я хочу показать шахматы с chessboardjs.com. Но я не могу, потому что я следую документации. И в то время как ID такой же.Невозможно отобразить плату, тогда как идентификатор такой же, когда я использую chessboard.js

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

Ид такое же. Это 'board1'. Я следовать правилам из документации ... link enter image description here

Но, я получаю сообщение об ошибке. Ошибка Ошибка шахматной доски 1002: элемент с идентификатором «board1» не существует в DOM.

enter image description here

Затем я прочитал документацию об ошибке 1002. Это говорит ..

CHESSBOARD не удалось найти элемент с document.getElementById. Обратите внимание: если вы передаете строку в качестве первого аргумента в конструктор ChessBoard(), это должно быть значение идентификатора DOM, а не селектор CSS (то есть: «доска», а не «#board»).

link

enter image description here

источник

2015-04-07 andika_kurniawan

Попробуйте разместить скрипт с var board1 ниже вашего div id = "board1" – Molda

В дополнение к комментарию @ Molda это связано с тем, что вам, вероятно, придется дождаться загрузки страницы перед вызовом сценариев. – Kaiido

@Molda Я разместил скрипт с var board1 ниже div id = "board1". Но я ничего не показываю. Нет предупреждения .. просто пустое место –

Вам необходимо 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>

источник

2015-04-07 14:27:00 prem89

Спасибо, брат! Вы очень классный –

Я бы не сказал, что ему нужен jQuery только для одной функции, которая «готова». Он мог бы разместить свой сценарий в нижней части файла или связать функцию init с событием window.onload. Не нужно включать весь jQuery. –

Вам не нужна вся библиотека jQuery, чтобы заставить ее работать, хотя вы можете найти ее полезной для других вещей. Если вы не предвижу с помощью JQuery для чего-то все, что вам нужно, это SetTimeout

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

я случайно обнаружил этот трюк 6 лет назад и разместил вопрос, который получил this informative answer. Он отметил, что он может не работать в IE, хотя, возможно, это изменилось в то же время.

источник

2015-04-07 14:34:47

Спасибо, лучшее решение ... –

Kinda hacky solution, лучше использовать событие window.onload. –

@Python Возможно, но window.onload * is * отличается от родительской готовности: http://stackoverflow.com/q/3698200/34806 –

Невозможно отобразить плату, тогда как идентификатор такой же, когда я использую chessboard.js

ответ

Смежные вопросы