質問編集履歴

6

現時点。

2019/02/22 11:49

投稿

ZhenZeZhang
ZhenZeZhang

スコア33

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ![現在の実行画面です](803e734e3431ac0f85c6befbdf031794.png)ピクセルでお絵かきのプログラムを作成しています。現在debugしているところです。
1
+ ![現時点更新](ef326c24ebe85a33123aa396e89c65f8.png)![現在の実行画面です](803e734e3431ac0f85c6befbdf031794.png)ピクセルでお絵かきのプログラムを作成しています。現在debugしているところです。
2
2
 
3
3
  ## 現在状況:debugをchrome でdebugしてみたが何も見つけることがなかった。まだ自分は初心者なのでどこ(chrome or editer?)に問題が見直しても見つからず。以下がコードとなる。( エラーメッセージがない状態でbugが起きてます。)
4
4
 

5

画像アップ

2019/02/22 11:49

投稿

ZhenZeZhang
ZhenZeZhang

スコア33

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ピクセルでお絵かきのプログラムを作成しています。現在debugしているところです。
1
+ ![現在の実行画面です](803e734e3431ac0f85c6befbdf031794.png)ピクセルでお絵かきのプログラムを作成しています。現在debugしているところです。
2
2
 
3
3
  ## 現在状況:debugをchrome でdebugしてみたが何も見つけることがなかった。まだ自分は初心者なのでどこ(chrome or editer?)に問題が見直しても見つからず。以下がコードとなる。( エラーメッセージがない状態でbugが起きてます。)
4
4
 

4

使用したediterとツール

2019/02/22 11:39

投稿

ZhenZeZhang
ZhenZeZhang

スコア33

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## 現在状況:debugをchrome でdebugしてみたが何も見つけることがなかった。まだ自分は初心者なのでどこ(chrome or editer?)に問題が見直しても見つからず。以下がコードとなる。( エラーメッセージがない状態でbugが起きてます。)
4
4
 
5
+ ### 使用した環境: sakura editor と google chrome.
6
+
5
7
  ```ここに言語を入力
6
8
 
7
9
  <!DOCTYPE html>

3

画像アップ

2019/02/22 11:24

投稿

ZhenZeZhang
ZhenZeZhang

スコア33

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- # ピクセルでお絵かきのプログラムを作成しています。現在debugしているところです。
1
+ ピクセルでお絵かきのプログラムを作成しています。現在debugしているところです。
2
2
 
3
3
  ## 現在状況:debugをchrome でdebugしてみたが何も見つけることがなかった。まだ自分は初心者なのでどこ(chrome or editer?)に問題が見直しても見つからず。以下がコードとなる。( エラーメッセージがない状態でbugが起きてます。)
4
4
 
@@ -247,3 +247,7 @@
247
247
 
248
248
 
249
249
  ```
250
+
251
+
252
+
253
+ ![完成イメージ](54fd48ec74a57c3fd1e067edeeebcec5.jpeg)#

2

言葉編集

2019/02/22 10:18

投稿

ZhenZeZhang
ZhenZeZhang

スコア33

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  # ピクセルでお絵かきのプログラムを作成しています。現在debugしているところです。
2
2
 
3
- ## 現在状況:debugをchrome でdebugしてみたが何も見つけることがなかった。まだ自分は初心者なのでどこ(chrome or editer?)に問題が見直しても見つからず。以下がコードとなる。
3
+ ## 現在状況:debugをchrome でdebugしてみたが何も見つけることがなかった。まだ自分は初心者なのでどこ(chrome or editer?)に問題が見直しても見つからず。以下がコードとなる。( エラーメッセージがない状態でbugが起きてます。)
4
4
 
5
5
  ```ここに言語を入力
6
6
 

1

debug をお願いしたことに謝罪します。

2019/02/22 09:34

投稿

ZhenZeZhang
ZhenZeZhang

スコア33

test CHANGED
@@ -1 +1 @@
1
- JavaScript & HTML のdebugお願します。(webでdebug文章が出力されず、理由不明)
1
+ JavaScript & HTML のエラー文となる可能性で見つけにくいところ教えて下さい。(webでdebug文章が出力されず、理由不明)
test CHANGED
@@ -119,3 +119,131 @@
119
119
  ほかの自動debugサイトでもやったみたが、<>がエラーした出てこれず、半角であることを確認した。;も全角でないと考える。念のため現在見直しをしている。
120
120
 
121
121
  # 難しいところ:debug , エラー文が出てこないことが最も難しいところです。
122
+
123
+ **更新:正解が分からないのにデバッグとか無理。 とりあえずChromeのデベロッパーツールのConsoleにメッセージがでていないか確認してみてください。
124
+
125
+ のコメントを受け取りました。デベロッパーツールでのbugを示してくれまさんでした。ただのbugですと自分でやるのですが今回は何回も人工debug をしてみましたがなかなか見つけることができませんでした。**
126
+
127
+
128
+
129
+ **完成のサンプルとしては以下のようになります。自分は独学のため関数名や構造を少し添加、調整をしていますが機能は以下のコードを変わらないです。**
130
+
131
+ ```ここに言語を入力
132
+
133
+ <!DOCTYPE html>
134
+
135
+ <html lang="ja">
136
+
137
+ <head>
138
+
139
+ <meta charset="utf-8">
140
+
141
+ <title>ドット絵作成ツール</title>
142
+
143
+ <style>
144
+
145
+ table { border-collapse: collapse; }
146
+
147
+ td {
148
+
149
+ width: 30px;
150
+
151
+ height: 30px;
152
+
153
+ border: solid 1px;
154
+
155
+ }
156
+
157
+ </style>
158
+
159
+ </head>
160
+
161
+ <body>
162
+
163
+ <div>
164
+
165
+ <table id="dotTBL"></table>
166
+
167
+ <br>
168
+
169
+ <table id="ColorTBL"><tr></tr></table>
170
+
171
+ </div>
172
+
173
+
174
+
175
+ <script>
176
+
177
+ var Matrix_Rows = 16;
178
+
179
+ var Matrix_Cols = 16;
180
+
181
+ var Color_Index = "black";
182
+
183
+
184
+
185
+ var dotTbl = document.getElementById("dotTBL");//ドット絵を描くテーブル
186
+
187
+ var colTbl = document.getElementById("ColorTBL");//色を選ぶテーブル
188
+
189
+
190
+
191
+ //ドット絵を描くテーブルを用意する
192
+
193
+ function dotTable() {
194
+
195
+ for(var i=0; i<Matrix_Rows; i++) {
196
+
197
+ var row = dotTbl.insertRow(-1); //行を追加する -1の指定で最後の行として追加される
198
+
199
+ for(var j=0; j<Matrix_Cols; j++) {
200
+
201
+ var cell = row.insertCell(-1); //その行にセル(列)を追加する
202
+
203
+ }
204
+
205
+ }
206
+
207
+ }
208
+
209
+
210
+
211
+ //選べる色を配列で定義する
212
+
213
+ var COL_SAMPLE = [ "black", "gray", "white", "red", "orange", "yellow", "lime", "cyan", "blue", "magenta" ];
214
+
215
+
216
+
217
+ //色を選ぶテーブルを用意する
218
+
219
+ function colorTable() {
220
+
221
+ for (var j=0; j<COL_SAMPLE.length; j++) {
222
+
223
+ var cell = colTbl.rows[0].insertCell(-1); //j番列のセル
224
+
225
+ cell.style.backgroundColor = COL_SAMPLE[j];
226
+
227
+ }
228
+
229
+ }
230
+
231
+
232
+
233
+ window.onload = function() { //HTMLが読み込まれると働く関数
234
+
235
+ dotTable(); //ドット絵を描くテーブル
236
+
237
+ colorTable(); //色を選ぶテーブル
238
+
239
+ }
240
+
241
+ </script>
242
+
243
+ </body>
244
+
245
+ </html>
246
+
247
+
248
+
249
+ ```