SVGアニメーションのエラー

お忙しい中ありがとうございます。
大変恐縮ですが、ご回答いただければ幸いです。

前提・実現したいこと

vivus.jsを使って手書き風のSVGアニメーションを実装しています。
実装サイト

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

動作には問題ないのですが、開発ツールで確認するとエラーが出ています。

Uncaught TypeError: can't access property "addEventListener", document.getElementById(...) is null

エラーの詳細

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en" >
3<head>
4<meta charset="UTF-8">
5<title>SVG Animation</title>
6<link rel="stylesheet" href="style.css">
7
8</head>
9	<body>
10		<div id="title">
11			<svg class="mask" viewBox="0 0 650 206" id="move" >
12				<defs><!-- アニメーション画像 -->
13					<mask id="clipMask">
14					<!--マスクのpath-->
15					<g id="mask">
16						<path class="st1" d="M77.1,111.3c0,0,24.6-21.9,4.6-31.4c0,0-24.7-15.2-67.6,53.3c0,0-26.6,40.8,3.2,66.1c0,0,16.4,13,37.6-3.6
17						c0,0,22.4-19.9,28.9-50.8c0,0,7.1-16,22.3-19.2c0,0,12-7.2-3.6,39.3c0,0,7.5-35.5,35.6-50.8c0,0-21.7,26.5-1,23
18						c0,0,13.6-1.3,14-13.8c0,0-1.6-9.5-6.7-4.3c0,0-7.3,7.8-9.8,27.3c0,0-1.5,13.3,8.3,9.8c0,0,11.9-6.5,19.8-23.2
19						c0,0,12.1-19.3,22.2-8.7c0,0-8.9-5.7-16.8,11.1c0,0-5.5,9.1,0,10.9c0,0,12.2-4.7,22.5-30.3c0,0-9.2,19.6-4.5,21.1
20						c0,0,5.9,1.3,18.3-16.4c0,0,25.5-51.4,32.7-65.3c0,0-20.5,40.7-25.1,74.8c0,0-0.5,10.1,4.1,12.1c0,0,6.6,5.9,27.1-26.6
21						c0,0-42.6,7-77-9.8c0,0,25.9-20.1,61.3-34.6c0,0,83-39.8,98.7-13c0,0-51.1,20.5-69.1,45.9c0,0-11.5,25.1-3.5,29.8
22						c0,0,7.6,0.5,19.1-23.4c0,0,5.2-18.1,8.1-16.5c0,0,1.6,32.9-1.5,53.8c0,0,7.4-61,41.7-73.1c0,0-30.9,41.3-10.7,36.5
23						c0,0,16.3-4.3,15.8-14.3c0,0,0.9-8.1-5.1-6.3c0,0-9.2,6.6-12.9,29.4c0,0-0.4,7.8,5.5,9.7c0,0,10.4-0.5,23.8-24.2"/>
24						<path class="st1" d="M266.4,79.3c0,0-2.5,1.2-7.4,9.3"/>
25						<path class="st1" d="M368.4,110.4c0,0,13.8-28.4,34.8-26.7c0,0,3-5.2,3.8-21.5c0,0,1.8-21-10.2-13.1c0,0-20.2,16.5-18.2,97.4
26						c0,0,17.7-44.4,33.3-66.5c0,0-9.5,25.4-3.1,30.4c0,0,6.1,4.2,19.7-23.9c0,0,2.6-9,6.6-11.9c0,0,10.4-4.5,3,11.6
27						c0,0-7.6,19.7-7.4,27.8c0,0,4.6-31.9,36.5-50.8"/>
28						<path class="st1" d="M422.2,55.1c0,0-1.2-0.5-5.9,9.9"/>
29						<path class="st1" d="M489.3,64.8c0,0-4-9-14.7,0.8c0,0-10,11.2-10.2,21c0,0-1.5,6.6,7.3,8.2c0,0,13.4,0.1,9.3,5.5
30						c0,0-22.9,22.3-27,18.6c0,0-4.5-2.6,15.5-23.3c0,0,64.2-79.8,72-87.4c0,0-22.2,40.9-25.7,75.6c0,0-0.6,12.1,6.1,11.8
31						c0,0,9.5-0.1,25.7-27.1c0,0-33.6-33-75.9-8.9c0,0,27.7-21.4,62.7-36.5c0,0,79.4-38.6,96.2-12"/>
32					</g>
33					</mask>
34				</defs>
35			<!-- ベース画像 -->
36			<image xlink:href="text.svg" width="100%" height="100%" mask="url(#clipMask)"></image>
37
38			</svg>
39			<!-- partial -->
40			<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.2/vivus.js"></script>
41			<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
42			<script  src="script.js"></script>
43		</div>
44	</body>
45</html>

CSS
1@charset "UTF-8";
2
3body{
4  text-align:center;
5	background: black;
6}
7
8#title{
9	width: 650px;
10	height: 206px;
11	margin: 0 auto 0 auto;
12}
13.st0{
14  fill:url(#SVGID_1_);
15}
16.st1{
17  fill:none;
18  stroke:#fff;
19  stroke-width:8;
20  stroke-linecap:round;
21  stroke-linejoin:round;
22  stroke-miterlimit:10;
23  enable-background:new;    
24}

JS
1var mySvg = new Vivus('move', {
2        type: 'oneByOne',duration: 200,forceRender: false, animTimingFunction:Vivus.EASE_OUT,start: 'autostart'})
3document.getElementById("replay").addEventListener("click", function(){
4  mySvg.stop().reset().play(2);
5  move.stop().reset().play(2);
6});
7
8
9var $doc = $(document),
10               $win = $(window),
11               $svg = $('svg').drawsvg(),
12               max = $doc.height() - $win.height();
13
14          $win.on('scroll', function () {
15               var p = $win.scrollTop() / max;
16               $svg.drawsvg('progress', p);
17          });

試したこと

JavaScripptの下記の部分に問題があることは分かるのですが、
どのように修正すればいいか分かりません…
↓
document.getElementById("replay").addEventListener("click", function(){

どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

詳細なエラーレポートとソースコードの添付ありがとうございます。
冒頭のエラーメッセージは、ざっくりと以下のように解釈できます。

document.getElementById(...) で参照されたHTML要素が存在しなかった。
そのため、その要素の addEventListener にアクセスできなかった。

たしかに、「試したこと」で記載していただいたとおり、JavaScriptコードで以下のように、"replay"というidを持つHTML要素への参照を試みていますね。

js
1document.getElementById("replay").addEventListener("click", function(){

続いて、HTMLコードを拝見しましたところ、"replay"のidを持つHTML要素は記述されせんでした。
これがエラーの原因かと思われます。

ためしにbody要素の閉じタグの直前に次のようなbutton要素を追加してみたところ、エラーが解消されました。また、このボタンを押すとアニメーションがリプレイされました。

html
1<button id="replay">Replay</button>

投稿2021/06/03 15:03

midorikun

総合スコア72

midorikun

2021/06/03 15:07

(追記) リプレイ機能が不要でしたら、JavaScriptコードから以下の部分を削除してもエラーが解消されるはずです。 ``` document.getElementById("replay").addEventListener("click", function(){ mySvg.stop().reset().play(2); move.stop().reset().play(2); }); ```