ピクセルでお絵かきのプログラムを作成しています。現在debugしているところです。

現在状況：debugをchrome でdebugしてみたが何も見つけることがなかった。まだ自分は初心者なのでどこ（chrome or editer？）に問題が見直しても見つからず。以下がコードとなる。（エラーメッセージがない状態でbugが起きてます。）

使用した環境：　sakura editor と　google chrome.

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>003_Picel_Draw</title>
  <style>
  table{border-collapse: collapse;}
  td{width:30px; height:30px; border:solod 1px; border-color:gold;}
  </style>
</head>

<body>
  <div>
    <table id="dt"></table> 
    <br>
    <table id="ct"><tr></tr></table>
  </div>
  <script>
    var dta=document.getElementById("dt");
    var cta=document.getElementById("ct");
    var mr=16, mc=16, ci= "#000000";
    var col=[	
    		"black","white","gray","darkcan","red",
    		"green","royalblue","deepponk","yellow","navy",
    		"lavende","lavender","blue","fuchsia","springgreen",
    		"antiquewhite","deepskyblue","lime","darkred","darkviolet",
    		"cyan","blueviolet","lightseagreen","slateblue","lightcoral" 
    		];
    		
    		function dtable(){
    		var ro, ce, j;
    		for(var i=0; i<mr.length; i++){
    		ro = dta.insertRow(-1);
    		for(j=0; j<mc.length; j++){
    		ce = ro.insertCell(-1);
    		}
    		}
    		}
    		
    		function ctable(){
    		var k, ce2;
    		for(k=0; k<col.length; k++){
    		ce2=cta.rows[0].insertCell(-1);
    		ce2.style.backgroudColor = col[k];
    		}
    		}
    		
    		window.onload= function(){
    		dtable();
    		ctable();
    		}
  </script>
</body>
</html>

試してみたこと：目でdebugして、＜＞を確認した。

ほかの自動debugサイトでもやったみたが、＜＞がエラーした出てこれず、半角であることを確認した。；も全角でないと考える。念のため現在見直しをしている。

難しいところ：debug , エラー文が出てこないことが最も難しいところです。

更新：正解が分からないのにデバッグとか無理。とりあえずChromeのデベロッパーツールのConsoleにメッセージがでていないか確認してみてください。
のコメントを受け取りました。デベロッパーツールでのbugを示してくれまさんでした。ただのbugですと自分でやるのですが今回は何回も人工debug をしてみましたがなかなか見つけることができませんでした。

完成のサンプルとしては以下のようになります。自分は独学のため関数名や構造を少し添加、調整をしていますが機能は以下のコードを変わらないです。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>ドット絵作成ツール</title>
  <style>
  table { border-collapse: collapse; }
  td {
   width: 30px;
   height: 30px;
   border: solid 1px;
  }
  </style>
 </head>
 <body>
  <div>
   <table id="dotTBL"></table>
   <br>
   <table id="ColorTBL"><tr></tr></table>
  </div>

  <script>
  var Matrix_Rows = 16;
  var Matrix_Cols = 16;
  var Color_Index = "black";

  var dotTbl = document.getElementById("dotTBL");//ドット絵を描くテーブル
  var colTbl = document.getElementById("ColorTBL");//色を選ぶテーブル

  //ドット絵を描くテーブルを用意する
  function dotTable() {
   for(var i=0; i<Matrix_Rows; i++) {
    var row = dotTbl.insertRow(-1); //行を追加する　-1の指定で最後の行として追加される
    for(var j=0; j<Matrix_Cols; j++) {
     var cell = row.insertCell(-1); //その行にセル(列)を追加する
    }
   }
  }

  //選べる色を配列で定義する
  var COL_SAMPLE = [ "black", "gray", "white", "red", "orange", "yellow", "lime", "cyan", "blue", "magenta" ];

  //色を選ぶテーブルを用意する
  function colorTable() {
   for (var j=0; j<COL_SAMPLE.length; j++) {
    var cell = colTbl.rows[0].insertCell(-1); //j番列のセル
    cell.style.backgroundColor = COL_SAMPLE[j];
   }
  }

  window.onload = function() { //HTMLが読み込まれると働く関数
   dotTable();		//ドット絵を描くテーブル
   colorTable();	//色を選ぶテーブル
  }
  </script>
 </body>
</html>

kei344

2019/02/22 09:21

【推奨していない質問｜teratail（テラテイル）】 https://teratail.com/help/avoid-asking

tabuu

2019/02/22 09:24

正解が分からないのにデバッグとか無理。とりあえずChromeのデベロッパーツールのConsoleにメッセージがでていないか確認してみてください。

ZhenZeZhang

2019/02/22 09:32

メッセージありがとうございます。Consoleにメッセージなんですが、コアダンプによるなるのかもしれないですが、出てきませんでした、

t_obara

2019/02/22 10:07

出てくるように工夫するのがdebugです。まず、エラーが出ていないのに、なぜ問題と判断しているのかをご提示ください。想定したようなイメージでブラウザが表示してくれないということであれば、現状の表示イメージと、期待する表示イメージをご提示するとよろしいかと。

ZhenZeZhang

2019/02/22 10:13

t_obara さん。メッセージありがとうございます。現状イメージなんですが、画面全体が真っ白で（まさに　.htmlを打って編集していないファイルを同じ状態です。）期待するイメージは質問の一番下のプログラムを執行したように、絵を描くスペースとその下には色を選ぶスペースがある状態で完成となります。図をアップします。

t_obara

2019/02/22 10:24

ブラウザには開発者ツールがあります。それを利用して、ブレークポイントをdotTableを呼び出す場所につけて、リロードし、想定通りの動作をしているか確認するのがデバッグの第一歩でしょう。それができないのであれば、console.logなどで想定通り処理が行われているか確認していけばよろしいかと。

Lhankor_Mhy

2019/02/22 11:22

『画面全体が真っ白』とのことですが、当方の環境でご提示のソースを試したところ、出力されましたので、問題が再現しませんでした。ご提示いただいているソースコード以外の部分に問題があるかと思います。（たとえば、FTPでアップロードを忘れている、とか）

Lhankor_Mhy

2019/02/22 11:27

ん？『自分は独学のため関数名や構造を少し添加、調整をしていますが機能は以下のコードを変わらない』ということは、ご提示のコードと質問者が実行しているコードは、違うもの、ということでしょうか？もしそうでしたら、その違う部分に原因があると思います。

ZhenZeZhang

2019/02/22 11:28

l_hankor_Mhy さん。FTPでアップロードを忘れていることなんですが、僕は実行するときにそのまま（桜エディターですとCril＋Bキー）実行していて、以前でも似ていたプログラムも同じ方法で実行しても問題ありませんでした。

ZhenZeZhang

2019/02/22 11:32 編集

はい。まさにそうです。ですが、自分が何度も見直ししたのですが変なところが見つからず、今繰り返し見直しをしています。

Lhankor_Mhy

2019/02/22 11:33

あなたが実行をして**問題が再現する**コードをご提示ください。質問者の現状をたとえ話で書くと、「ウチにあるバナナが紫色なんですが、これ、食べられますか？」とぶどうを見ながらネットで質問しているようなものです。回答者と質問者が同じものを見ないと、まともな回答は得られません。

Lhankor_Mhy

2019/02/22 11:34

といいますか、「問題が再現する最小のコード」を書こうとしているうちに、大抵の問題は原因に気づいてしまうと思います。

Lhankor_Mhy

2019/02/22 11:46

あああ、すみません。ソースコードが二つあったんですね。見落としてました。とりあえず、typo 指摘しておきます。 border:solod ↓ border:solid

ZhenZeZhang

2019/02/22 11:48

すみません！！！！！見落としました。

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

回答3件

ベストアンサー

補足欄では大変失礼しました。

mr=16としているのに、ループでmr.lengthを配列の長さを期待しているのが原因だと思います。

投稿2019/02/22 11:49

Lhankor_Mhy

総合スコア36115

ZhenZeZhang

2019/02/22 11:52

いえいえ。＠ｖ＠知識不足な自分を最後まで教えてくれてありがとうございます。解決できました！ありがとうございます。

ZhenZeZhang

2019/02/22 11:53

ここでlengthというのは配列には使えるが、数字変数には使えないとわわって良かったです。

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

こんにちは！
結果的に、"どうなるのが正解"かを書いてくれると、
回答者は道筋を示してくれますよ＾＾

投稿2019/02/22 09:21

hentai_nabe

総合スコア94

ZhenZeZhang

2019/02/22 09:35

ありがとうございます！これを用いて編集します。

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

これ追加

javascript
1  function handler (a) {
2    let b = a.target;
3    if ('TD'==b.tagName) {
4      let tb = ((e,n)=>{while(e){if(e.tagName==n)break;e=e.parentNode};return e})(b,'TABLE');
5      switch (tb.id) {
6      case 'ColorTBL' : Color_Index = b.style.backgroundColor; break;
7      case 'dotTBL'   : b.style.backgroundColor = Color_Index; break;
8      }
9    }
10  }
11  
12  document.addEventListener ('click', handler, false);
13