HTML,JavaScript プレビューが表示されません。

テキストのコードを丸々写したのですがプレビューが表示されません。
何度も見返したのですが原因が分からないため、見ていただきたいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>ドット絵作成ツール テスト</title>
6        
7        <style>
8            table { border-collapse: collapse; }
9            td {
10             width: 30px;
11             height: 30px;
12             border: solid 1px;
13            }
14        </style>
15    </head>
16    <body>
17        <div>
18            <table id="dotTBL"></table>
19            <br>
20            <table id="ColorTBL"><tr></tr></table>
21        </div>
22        
23        <script>
24            var Matrix_Rows = 16;
25            var Matrix_Cols = 16;
26            var Color_Index = "black";
27            
28            var dotTbl = document.getElementById("dotTBL");
29            var ColTbl = document.getElementById("ColorTBL");
30            
31            function dotTable() {
32                for(var i=0; i<Matrix_Rows; i++) {
33                    var row = dotTbl.insertRow(-1); //行を追加
34                    for(var j=0; j<Matrix_Cols; j++) {
35                        var cell = row.insertCell(-1); //行にセルを追加
36                    }
37                }
38            }
39            
40            //選べる色を配列で定義
41            var COL_SAMPLE = ["black", "gray", "whte", "red", "orange", "yellow", "lime", "cyan", "blue", "magenta"];
42            
43            //色を選ぶテーブル
44            function colorTable() {
45                for(var j=0, j<COL_SAMPLE.length; j++){
46                    var cell = colTbl.rows[0].insertCell(-1);
47                    cell.style.backgroundColor = COL_SAMPLE[j];
48                }   
49            }
50            
51            window.onload = function() {
52            dotTable();
53            colorTable();
54            }
55        </script>
56    </body>
57</html>

m.ts10806

2019/02/25 08:00

>コードチェックお願いします。ここは作業依頼、デバッグ依頼のサイトではないです。質問の仕方には気をつけてください。 https://teratail.com/help/question-tips#questionTips1-1 > teratailを「サポートセンター」だとは思わないでください。作業依頼のような投稿をして、課題や仕事を無償でやってもらえる場ではありません。あなたがそのようなつもりで質問しているのだと他のユーザーから誤解されないように、丁寧な質問を心がけましょう。なお、このようにコピペ不可のコードを提示されても確認しようが無いので質問を編集し、きちんと情報を提示してください。

bochan2

2019/02/25 08:02

質問頂きありがとうございます。エラーメッセージ等表示されていれば追記をお願いします。また、出来ればスクリーンショットをアップロードしていただけると解決の役に立ちますので追記をお願いします。

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

回答2件

既に解決されたようですが、覚えておいてもらいたいので補足として回答します。

プログラムは書いた通りにしか動きません。
プログラムには文法がきちんとあり、それが守られていることできちんと動きます。
具体的に言うとaとAは別物です。
何かしらの英単語を利用したとしてもプログラムにとってはただの指示・命令の1つでしかないので、仕様や文法と違うものであれば容赦なく「NG」をつきつけます。

つきつける、というとちょっと怖いかもしれませんが、要はエラーですね。
エラーには色々な種類がありますが、ほとんどが文法が守られていないことによるものです（未定義のものを使おうとした、とかもよくあります）

ということは、まずエラーメッセージを確認してください。
確認の仕方は言語によって違いますが、エラーの対処方法は同じです。
下記のような記事を参考にしてください。

エラーメッセージの読み方と対処, 検索や質問の原則

※上記の記事にある参考リンクも非常に有益です。読んでお役立てください。

「テキスト丸写し」　要は「写経」と揶揄される行為ですが、
これにありがちなのは、文法に明るくないところから来る
「見えたように書いてしまう」という状態です。
< を〈と書いてしまったり、半角なのに全角で書いてしまったり、ですね。
非常に良くあります。
teratailにも同じように「見えたように書いた」「スペルミスがあった」「閉じ忘れがあった」という質問が多くあがっています。

「書いた通りにしか動かない」ので、仕様と違ったらそれはもう動かないと思って良いです。
構文が違う、、、となればマニュアルやリファレンス、仕様を読んでください。
メジャーな言語のマニュアルは内容が非常に充実していますし、日本語文章も多いです。（できれば英語しか出てこなくてもGoogle翻訳使って読み進めるくらいの気概が望ましい）

ご参考まで。

投稿2019/02/25 08:25

m.ts10806

総合スコア80850