getTotalLengthがnullで返されてしまうエラーについて

Question

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ

Cannot read property 'getTotalLength' of null

###該当のソースコード

var myPath = document.querySelector('.cameraPath' );
var pathLength = myPath.getTotalLength();
var scrollMax = document.documentElement.getBoundingClientRect().height - window.innerHeight;
var myCircle = document.querySelector('.points' );
var speed = pathLength/scrollMax;
 
$(window).on('scroll', function() {
    var progress =  $(this).scrollTop()*speed;
    var point = myPath.getPointAtLength(progress);
    myCircle.setAttribute( 'cx', point.x );
    myCircle.setAttribute( 'cy', point.y );
 
    if ( progress >= pathLength ) { 
 
       progress = 0;
 
    } else {
 
       progress += speed;
   
    }
});

###試したこと
svgをcssで操作などはしたことあるのですが、jsでの経験はありません。

###補足情報(言語/FW/ツール等のバージョンなど)
https://itstudio.co/2016/03/15/5537/ や　https://qiita.com/takumifukasawa/items/b3df19bba0950d3c64be を参考にさせていただきました。

Answer 1

.cameraPathに対応するpath要素が見つかっていません. script要素によるスクリプトの実行がpath(svg)要素の初期化の前に行われている可能性があります.

スクリプト全体を適宜次のコードブロックで囲み, 全てのノードがdomを通じてアクセス可能となってからスクリプトが実行されるように修正して下さい.

document.addEventListener("DOMContentLoaded", function(e){
//あなたのコード
});

Comments

[ShuyaOhgizawa]

無事動きました、ありがとうございました！