JavaScriptのエラーの原因とは？

前へ 次へ
このQ&Aのポイント
  • JavaScriptのエラーの原因について解説します。
  • エラーメッセージによってエラーの原因を特定する方法を紹介します。
  • エラーの解決方法についても触れます。
回答を見る
  • ベストアンサー

JavaScriptのエラーの原因

あるコードでエラーがでて原因がさっぱり解りません。下記コードは、そのエラーが消えないように最小限のコードにそぎ落としたものです。四角が大きくなったり小さくなったりするだけのアニメーションです。buttonを押すとエラーになります。consoleに赤色で0と表示されるだけのエラーです。かれこれ1ヶ月くらい解決できません。これはいったい何のエラーなのでしょうか？ <html> <body> <button>button</button> <div id='example'></div> <script src="https://d3js.org/d3.v5.min.js"></script> <script> const svg =d3.select("#example") .append("svg") .attr("width",300) .attr("height",150) let path = svg.selectAll("path") .data([0]) .join("path") .attr("d","M0,0 L300,0 300,150 0,150") async function plot(){ let b=0; try{ while(true){ await path .data([0]) .transition() .delay(1000) .duration(1500) .attr("d",b?"M0,0 L300,0 300,150 0,150":"M0,0 L30,0 30,15 0,15") .end(); b=!b } }catch(e){// このcatchがないと Uncaught (in promise) と表示される console.error(e); } } d3.select("button") .on("click",() => { path.interrupt() ; plot(); }) plot(); </script> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5081/13278)
回答No.5

＞　なぜメッセージなしの0だけなのでしょうか？ ＞　Promiseのエラーってそういうものなのでしょうか？ Promiseだからという事では無く、処理を中断させる行為はエラー（予期せぬ問題）が発生した訳では無く、プログラムを書いた人の意志によって中断されたからメッセージが無いと言う事なんじゃないでしょうか。 この辺りはコーディングのポリシーの問題でしょうね。

takahasi5634
質問者

補足

長々付き合わせてしまい申し訳ありません。ありがとうございました。

その他の回答 (4)

  • t_ohta
  • ベストアンサー率38% (5081/13278)
回答No.4

＞　D3jsのコードの何行目をかくにんしたんですか？ Ver. 5.16.0 のd3.jsを見ましたが、3140行目あたりからメインの動作の骨格となる処理が書かれています。 interrupt() が何をしているのか判りますし、インスタンスを生成する時に動作中の処理があれば interrupt() などで処理を終わらせている事が判ります。 どのような手順で終わらせているのか理解していけば見えてくるんじゃないでしょうか。 大事な点はJavaScript自体が出しているexceptionはキャッチする事無く流しているので、描画処理などでブラウザのJavaScriptエンジンがどのような振る舞いをするのかも考えるといいんじゃないでしょうか。

takahasi5634
質問者

補足

さすがですね。 3982行あたりのtransition_end()の中のon1._.interrupt.push(cancel);をコメントアウトするとエラーがでなくなります。 浅い経験上、エラーをキャッチすると何らかのメッセージが表示されていたので、この0がどこからthrowされるのかさっぱり解りませんでした。表示される0は.data([0])の0だと思うのですが、なぜメッセージなしの0だけなのでしょうか？ Promiseのエラーってそういうものなのでしょうか？

  • t_ohta
  • ベストアンサー率38% (5081/13278)
回答No.3

＞　内部的に interrupt()が呼ばれる根拠は何ですか？ D3.jsのソースを読んだだけです。

takahasi5634
質問者

補足

D3jsのコードの何行目をかくにんしたんですか？ 教えてください。 私も確認しましたがplotでは呼ばれてませんよ。

  • t_ohta
  • ベストアンサー率38% (5081/13278)
回答No.2

＞　interrupt() を削除しても同じエラーはでます。 ボタンを押した時に plot() を再度コールしています。 interrupt() だけを削除すると、動作中の処理を初期化しようとするので強制終了させることになり、結果として内部的には interrupt() が実行されているようです。 ＞　エラーの解決策を知りたいのではありません。エラーの原因が知りたいのです エラー（exceptionが飛ぶ）原因は interrupt() が実行された事です。

takahasi5634
質問者

補足

内部的に interrupt()が呼ばれる根拠は何ですか？ どこかのサイトにそのようなことが掲載されていたのなら、そのサイトのURLを教えて頂けませんか？ このinterruptはd3jsの関数で単にアニメーションをキャンセルするだけのものですよ。 https://bl.ocks.org/veltman/344418d9602a29825d63

  • t_ohta
  • ベストアンサー率38% (5081/13278)
回答No.1

コンソールに0と表示されるのはexceptionの中身が「0」だからですね。 色が赤なのは console.error() で出力しているからエラーだと解釈されるからです。 console.log() で出力すれば色が変わります。 interrupt() メソッドは処理を強制中断するモノですから、処理が途中で中断されたのでexceptionが飛んでるのでしょう。 while(true){} で無限ループにしているのですからexceptionで中断させるしか終わらせる手段がありません。 キャッチして中身が 0 なら中断後の処理を実行してやればいいんじゃないでしょうか。

takahasi5634
質問者

補足

回答ありがとうございます。 ---console.log() で出力すれば色が変わります エラーだと解らせるためにわざとerrorにしてます。 -----interrupt() メソッドは処理を強制中断するモノですから、処理が途中で中断されたのでexceptionが飛んでるのでしょう interrupt() を削除しても同じエラーはでます。 -----キャッチして中身が 0 なら中断後の処理を実行してやればいいんじゃないでしょうか エラーの解決策を知りたいのではありません。エラーの原因が知りたいのです

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptが動かない原因

    初めてのＨＰ制作に取り組んでいます。　htmlとcssはほぼ完成し、大体の構造は組みあがりました。　あとは「滑らかスクロール」「litebox」の２つのjavascriptを組み込むだけなのですが、両方ともうまくいきません。　原因としては何が考えられるでしょうか？　とりあえず、一方の「滑らかスクロール」について教えてください。 試したjs： http://blog.crara.cc/archives/173　とhttp://user1.matsumoto.ne.jp/~goma/js/ps2.html#sample　 （以前QNo.2848668で別のjsについての質問をしましたが、いただいた回答をもとに、貼るだけ簡単、なものを探しました） 現状：　ダウンロードしたスクリプトをそのまま保存。　ヘッダーに<script type="text/javascript" src="tinyscrolling.js"></script>等を記述。　ファイル名や階層の間違いなし。　・・・しかし、スクロールはせず一気に目的地まで飛びます。 また、ためしにこのファイルを開いてみようとすると、以下のようなエラーメッセージが出ます。 エラー：　'window'は宣言されていません。 コード：　800A1391 ソース：　Microsoft JScript　実行時エラー （ちなみに、もう一方のスクリプトでも同じメッセージが出ました） 環境等：　まだサーバーにはアップロードしていない状態。　ＩＥ６、WindowsXPです。 どうぞよろしくお願いいたします。

  • JavaScriptがFirefoxで動かない・・・

    よろしくお願いいたします。 IEでは正常に動作するのですが、Firefoxで実行してみると ボタンを押しても何の反応もありません。 どのように変更すればFirefoxで動作するのでしょうか？ よろしくお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- function warning(){ alert("テストです。"); } //--> </SCRIPT> <FORM><INPUT type="button" value="ボタンを押して。" onClick="warning()"></FORM> 上記のコードを外部に独立させて・・・ 【コード】 <script type="text/javascript" src="sample3.js"></script> <input type = "button" name = "button3" value = "sample3" onclick = "Func3();"> 【sample3.js】 function Func3() { alert("js外部ファイル記述"); } です。 FC2ブログで活用したいのですが・・・ 改行の扱いは「HTMLタグのみ」に設定しています。 ご回答、よろしくお願いいたします。

  • 2つのjavascriptを組み合わせたい

    フォームメール用の2つのjavascriptがあります。 ●2重送信防止とデータ送信後指定ページへ遷移するjavascript ●テキストボックスが空欄だった時にアラートを表示するjavascript の2つです。 この2つを組み合わせようとしたのですが、うまく動きません。 ご指導いただきたくお願いいたします。 *************************************************** 【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】 送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTML送信キャンセル event.preventDefault(); //フォーム要素取得 var $form = $(this); // 送信ボタンを取得 // （後で使う: 二重送信防止） var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, // 送信前 beforeSend: function(xhr, settings) { // ボタン無効二重送信防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタン有効再送信許可 $button.attr('disabled', false); }, // 通信成功処理 success: function(result, textStatus, xhr) { // 入力値初期化 $form[0].reset(); location.href = "finish.html"; }, // 通信失敗処理 error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信A"> </form> *************************************************** 【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】 テキストボックスが空欄だったらアラートを表示します。 <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form> *************************************************** 【上記の2つを組み合わせてみました。】【動きません】 テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。 【結果】 「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、 finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { event.preventDefault(); var $form = $(this); var $button = $form.find('button'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, beforeSend: function(xhr, settings) { $button.attr('disabled', true); }, complete: function(xhr, textStatus) { $button.attr('disabled', false); }, success: function(result, textStatus, xhr) { $form[0].reset(); location.href = "finish.html"; }, error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form>

  • javascriptの構文エラー

    下記のようなhtmlファイルを作りましたが、ＩＥで開こうとすると function jikko(){ }←この文字がエラーになってしまいます。構文エラー　コード０ WindowsVISTA　標準のＩＥを使っています。 解決策を教えてください。よろしくお願いします。 <html> <head> <script type="text/javascript"> function jikko(){ var WshShell = new ActiveXObject("WScript.Shell"); Wsh.exec("cmd.exe /c /"%programfiles%//t.bat/""); } </script></head> <body> <button type="button" onclick="jikko()"> </button> </body> </html>

  • javascriptエラーについて教えてください。

    メアドを直接ソースに書かないようにするためのjavascriptで 外部ファイルを読み込むように実行してみたのですが、 「実行しましたが、ページでエラーが発生しました。」となり、 ライン：9　文字：1 エラー：‘CSAct’は宣言されていません。 コード：0 という内容のメッセージが出ます。 【HTML】 1：<HTML> 2：<HEAD> 3：<TITLE>情報</TITLE> 4：<meta http-equiv="content-type" content="text/html;charset=shift_jis"> 5：<LINK rel="stylesheet" href="××css" type="text/css"> 6：<script type="text/javascript" src="mail.js"></script> 7: <script type="text/javascript"> 8: <!-- 9: CSAct[/*CMP*/ '1320E1966'] = new Array(CSGoBack1); 10: // --> 11: </script> 12: </HEAD> 13: <body>～ 【メアドの箇所】 E-mail：<script type="text/javascript"><!--// add_AAA(); //--> </script> 【外部ファイル_mail.js】 function add_AAA(){ mail="AAA." + "BBB" + "@CCC.ne.jp"; document.write(mail.link("mailto:" + "AAA." + "BBB" + "@CCC.ne.jp")); } はっきり言ってjavascriptについて全然わかっていない超初心者です。。。 このソースもよさそうなところから引っ張ってきただけなので、 何をどう直していいのか、過去ログを見てもお手上げです。 どなたかエラーの原因がお分かりになりましたらご教授いただけないでしょうか？ よろしくお願いします。

  • javascript　＋　php　でエラー

    エラーを取り除くことができず、困っています。 助けてください。 下記のようなコードで、PHPからjavascriptに文字列を渡しているのですが、 文字列に改行コードがあるとエラーになってしまいます。 (改行コードがない場合はエラーはでません) 文字コードはEUC-JP、改行はLFとしています。 エラーの原因と、対策を教えてください。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function sampl(str) { alert(str); } //--> </script> </head> <body> <form method="post" action="#"> <?php $str = "テスト\n改行あり"; ?> <input type="button" value="実行" onClick="sampl('<?=$str?>')"> </form> </body> </html>

  • [javascript]「*=」の意味

    お世話になります。 js初心者ですが、質問させてください。 現在jsを学んでおり、ネットで手ごろなコードを探し読んでいます。 下記のコードは画像にカーソルをのせたとき、画像を差し替えるというものですが、 「*=」の意味が分かりません。 ★★★★★★★★★★★★★★★★★★★ jQuery(function($) { var postfix = '_on'; $('#nav_global a img').not('[src*="'+ postfix +'."]').each(function() { var img = $(this); var src = img.attr('src'); var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.')); $('<img>').attr('src', src_on); img.hover(function() { img.attr('src', src_on); }, function() { img.attr('src', src); }); }); }); ★★★★★★★★★★★★★★★★★★★ 「*=」の意味は例えば、 a*=b と a=a*b は同義で、 「aかけるbをaに代入」 というような解釈でいます。 この考え方だと、上記コード3行目 [src*="'+ postfix +'."] の意味がよくわかりません。 srcと"'+ postfix +'."をかけてsrcに代入？ そんなこと出来るのでしょうか。 よろしければご回答いただければと思います。 よろしくお願いします。

  • （jQuery)どこがエラーなのか分からない

    ●質問の主旨 下記のコードはどこが間違いでしょうか？ Javascriptコンソールでも特にエラー表示がされません。 ご存知のかたご教示願います ●コードの意図 1．ボタン要素（button）をクリック 2．非表示(none)にされていたdiv要素（赤い正方形）が出現する ●コード （click.html) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの勉強</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <h1>JavaScriptの勉強</h1> <script> $(function() { $("button").click(function() { $("target").show('slow'); }); }); </script> <p><button id='button'>クリック</button></p> <div id="target" style="display"; none; width: 150px; height:150px; background-color: red;></div> </body> </html>

  • javascript 初心者

    https://paiza.jp/works/mondai/data_structure/data_structure__set_boss この問題で以下のコードで試したのですが、大きな数字だと正しい結果が出ません。なぜなのでしょうか。有識者の方教えてください。 （汚いコードでごめんなさい） let n=lines[0]; let a=lines[1].split(" "); let b=lines[2].split(" "); let c=a.concat(b); const arrayB = Array.from(new Set(c)); const sort = arrayB.sort((a,b) => (a < b ? -1 : 1)) const answer=sort.join(" "); console.log(answer);

  • JavaScriptのエラー　（ 関数の未定義）

    htmlであるボタンを押すと、そこで実行するはずの関数が未定義になる、 という不具合が出ていたのですが、 JavaScript（<script>）の記述場所を変更する事により、対処することができました。 でもまだ、理解ができずにいます。 たとえば <head> <script ・・・・外部jsファイル> </head> <body> <input type="text" name="hizuke"　・・・> <input type="button" name="newdisp"　value="表示" onclick="hyouji();"> 　・ 　・ <input type="hidden" name="syori"　value=""> 　・ 　・ 　・ </body> 　・ 　・ ※外部jsファイルでhyouji()関数記述 のようなhtmlで、今回「表示」ボタンをクリックするとエラーになり、 エラーの詳細を見ると　 　　hyouji()が未定義です となり、 JavaScriptの関数がまだ読み込まれていないから 記述を後に移動したほうがいいというアドバイスを受け、 このhtmlを <head> </head> <body> <input type="text" name="HIZUKE"　・・・> <input type="button" name="newdisp"　value="表示" onclick="hyouji();"> 　・ 　・ 　・ <input type="hidden" name="syori"　value=""> 　・ <script ・・・・外部jsファイル> </body> 　・ 　・ のように変更して、エラーをなくすことができました。 外部jsファイルのhyouji()関数の処理は 「syori」のhiddenに「hyouji」というような処理識別をセットし、 submitしています。 hyouji()関数の前にもたくさんの関数が定義されていて その中には 　　　var aaa = document.form1.xxxx.value; などの記述もたくさんあります。 <script>の記述場所を移動したことで 　　　htmlを読み込んで、 　　　「表示」ボタンを表示し、 　　　jsファイルを読み込む・・・ という処理順序になると思うのですが 表示ボタンをクリックしたときには、 jsファイルの読込みは終了しているのでしょうか？？？ ボタンをクリックした時にはjsの読込みを終了していないといけないと 思うのですが、なぜjsの記述を<inputボタン>の記述より後のほうに移動させて、 未定義関数が解決されるのかがわかりません。 エラーの内容が 　　オブジェクトが見つかりません などだと、hidden項目が後に記述されているからか・・・と理解できるのですが。 うまく伝わるか不安ですが、 ボタンクリックの前にはJavaScriptの関数が読込みが 終了していなければならないのはわかるのですが、 なぜ、ボタンの表示より、後に記述することで解決できるのか 解説していただけると助かります。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する