jquery 플러그인 오류 질문
본문
https://aplayer.js.org/#/ 요너석을 그누보드에 테스트해볼라고 집어넣었더니
Uncaught TypeError: Cannot read property 'classList' of null
이런 에러가 나버는대 원인이 뭘까요?
그누보드 쪽은 아직 음악하고 커버주소는 수정안했습니다.
코드팬에선 잘만되는대 그누보드에서만 안됩니다. ㅠㅠ
코드팬 주소 : https://codepen.io/ww9603/pen/dypMjwz
그누보드 주소 : https://bear0724.com
그누보드 코드는 혹시나 충돌인가해서 하단에 넣었습니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<div id="aplayer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script>
//APlayer 스크립트염
const ap = new APlayer({
container: document.getElementById('player'),
fixed: true,
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg',
}]
});
</script>
!-->
답변 4
document.getElementById('player')
<div id="aplayer"></div>
아이디명이 달라서 그런것 같네요
player나 aplayer로 두개의 항목을 일치시키셔야 할것 같습니다
그누에서 테스트 할수있게 볼수있나요? 그 게시판 영역만 오픈해주시면 알것같은데요
그누보드 css js 가져오는 방식 달라서 오류가 생기는 것 같습니다.
일반적으로 호출하면 호출순서가 달라서 오류가 발생하는 경우가 있더라고요
add_stylesheet('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">', 0);
add_javascript('<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>', 0);
이런식으로 변경해서 해보세요 head.sub.php에서 선언 해 줍니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<div id="aplayer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script>
//APlayer 스크립트염
const ap = new APlayer({
container: document.getElementById('player'), <- aplayer로 수정해 주세요
fixed: true,
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg',
}]
});
</script>