svgアニメーションを操作するvivus.jsを使ってjsファイルに書き込んだんですが、開発ツールにて
Error: "element" parameter is not related to an existing ID
と出て来ました。存在してるIDと紐づけられないってこと?ですかね?
しかしちゃんと動いてはいます。
なぜこのエラーが出てくるのかが分からず気持ち悪いです。
以下、jsファイル(jquery)のコードです。
var myVivus = new Vivus('canvas',{ start: 'inViewport', type: 'async', duration: 90, }, function(){ $('#canvas').addClass('Plan_other_illust_line_fill'); }, ); var myVivus2 = new Vivus('canvas2',{ start: 'inViewport', type: 'async', duration: 90, }, function(){ $('#canvas2').addClass('Plan_winter_illust_line_fill'); }, ); $(document).on('click', '.Plan_stay_button_1', function(){ $('#canvas').removeClass('Plan_other_illust_line_fill'); myVivus.reset().play(); }); $(document).on('click', '.Plan_stay_button_2', function(){ $('#canvas2').removeClass('Plan_winter_illust_line_fill'); myVivus2.reset().play(); }); });
<div class="Plan_stay_button"> <div class="Plan_stay_button_1"> <img class="Plan_stay_button_background1 Hide" src="<?php echo esc_url(get_template_directory_uri());?>/works/img/plan/plan-switch1.png" alt=""> <?php $locale = get_locale(); if ('ja' == $locale ) { ?> <p class="Plan_stay_button_text1">4月 〜 10月 ◀︎</p> <?php } else { ?> <p class="Plan_stay_button_text1">April to October ◀︎</p> <?php } ?> </div> <div class="Plan_stay_button_2"> <div class="Plan_stay_button_2_click"> </div> <img class="Plan_stay_button_background2" src="<?php echo esc_url(get_template_directory_uri());?>/works/img/plan/plan-switch2.png" alt=""> <?php $locale = get_locale(); if ('ja' == $locale ) { ?> <p class="Plan_stay_button_text2">11月 〜 3月 ◀︎</p> <?php } else { ?> <p class="Plan_stay_button_text2">November to March ◀︎</p> <?php } ?> </div> </div> <svg version="1.1" id="canvas" class="Plan_other_illust Plan_other_absolute svgPlan" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 520.2" style="enable-background:new 0 0 1000 520.2;" xml:space="preserve"> [...] </svg> <svg version="1.1" id="canvas2" class="Plan_winter_illust Plan_winter_absolute svgPlan" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 520.2" style="enable-background:new 0 0 1000 520.2;" xml:space="preserve"> [...] </svg>
気になったのが、複数あるページのうちの1つにだけそのsvgを扱っていて、そのページでは開発ツールはエラーを言って来ません。
svgファイルを使ってない他のページでエラーを言って来ます。
この場合どう言ったことが原因に挙げられるのでしょうか?
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー