Q&A
typoあります。
ce2.style.backgroudColor = cola[k];
↓
ce2.style.backgroundColor = cola[k];
(簡単な質問ですが非常にややこしです。)以下のimage1が現状でimage2のようにクリックしたらドット絵が描けるような感じなプログラム作成を勉強しています。debug 文章がなく、困りました。
image1(現状)下にあるカラーボードの色が示されない。セルを選択しても反応なし。（そのセルの白色を絵画スペースに事前に塗った黒を白色に塗ることはできる。）
imgae2
試したこと：色の英語指定のスペルミスを確認をし修正を行った。プログラムのスペルミスを確認をした。完成プログラムと現時点自分のプログラムと見比べ、文法を自分ができるところを直した。
####自分が判断すると：下のカラー版に色があらわされていなかったので、おそらく色を代入する部分でエラーが起きている可能性が大きい。自分も何度も見直したのですが恥ずかしところですが見つけることができませんでした。
質問者について：完全の初心者でタグや関数のつながりやその文法関係はまだ頭の中で構築されず自分は島の自分は”ポンコツ状態”of JavaScriptと呼んでいる。ご了承ください。
使用開発tool: 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:solid 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 cola = ["black", "white", "gray", "darkcyan", "red", "green", "royalblue", "deeppink", "yellow", "navy", "teal", "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; i++) { ro = dta.insertRow(-1); for (j = 0; j < mc; j++) { ce = ro.insertCell(-1); ce.onclick = function () { this.style.backgroundColor = ci; } } } } function ctable() { var k, ce2; for (k = 0; k < cola.length; k++) { ce2 = cta.rows[0].insertCell(-1); ce2.style.backgroudColor = cola[k]; ce2.onclick = function () { ci = this.style.backgroundColor; } } } window.onload = function () { dtable(); ctable(); } </script> </body> </html>
完成理想プログラムサンプル
<!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); //その行にセル(列)を追加する cell.onclick = function(){ this.style.backgroundColor = Color_Index; //クリックしたセルに色を付ける } } } } //選べる色を配列で定義する 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]; cell.onclick = function(){ Color_Index = this.style.backgroundColor; //クリックした時に色を取得 } } } window.onload = function() { //HTMLが読み込まれると働く関数 dotTable(); //ドット絵を描くテーブル colorTable(); //色を選ぶテーブル } </script> </body> </html>
問題があると考えられるプログラム
function ctable() { var k, ce2; for (k = 0; k < cola.length; k++) { ce2 = cta.rows[0].insertCell(-1); ce2.style.backgroudColor = cola[k]; ce2.onclick = function () { ci = this.style.backgroundColor; } } }
質問内容が不明なところであれば、コメントをお願いします。
回答2件
0
ベストアンサー
js
1 function ctable() { 2 var k, ce2; 3 for (k = 0; k < cola.length; k++) { 4 ce2 = cta.rows[0].insertCell(-1); 5 ce2.style.backgroudColor = cola[k]; 6 ce2.onclick = function () { 7 ci = this.style.backgroundColor; 8 } 9 } 10 }
の５行目のbackgroundColorのnが抜けていますね。スペルミスです。
投稿2019/02/23 06:13
総合スコア125
実は問題解決したのは二人の優しい方のおかげで解決することができました。大変感謝をしています。そして、私のほうで最初回答反応が示されたのはMhyさんで、そのあとすぐにーｂさんのほうの回答がきましました。なので私本人はMhyさんにBAに選びたいと思ったのですが、コメントはBAにすることができず、そこでおそらくラグというかなどの理由でややこしくなったかと思います。この質問によりプログラマーさんたちの譲り合いの暖かい精神を見ることができたので、自分は問題解決よりこちらのほうがより大切であると思います。感謝します。
0
。。。。。。。。。。。。。。。。。。。
投稿2019/02/23 06:17
編集2019/02/23 06:30総合スコア33
> また後から読む人のためにも、具体的な解決手順を記載してください。
https://teratail.com/help#resolve-myself
解決手段が記載されていないため、マイナス評価しました。追記されましたら評価を戻すつもりです。
わかりました。ですが、Mhyさんをベストアンサーにするつもりですが以下のコピペして回答することをお願いしたいです。
typoあります。
ce2.style.backgroudColor = cola[k];
↓
ce2.style.backgroundColor = cola[k];
area-bさんのご回答をBAにするか、自己解決でいいかと思いますが。
わかりました。Mhyさんがそうおっしゃれるようであれば。
すみません。なんかこじれてますね。たぶん私の回答がLhankor_Mhyさんより数分遅いのでこういうことになっているのだと思いますが、Teratailの簡単な質問への回答では同じ回答が複数あるのはよくあることですしパクったとかではなく、考えたり書いたりしている間に投稿されるだけだと思います（リロードしないと更新されないので）。私もはじめて重複してからというもの一応、回答を書く前にリロードしていますが今回は修正依頼にあったので見逃しました。紛らわしくて申し訳ないですがあまり悪く思わないでください。
言葉が足りなかったようですが、私が補足欄でしたのは、ただのtypo指摘であり、回答ではないです。
そこを直せば動作するのかどうかも確認していませんから、問題の原因であるかどうかもわからない状態で目についたものを書いているだけです。（まだ他にバグがあるだろうと思っていました）
なので、area-b さんの回答がBAであるのは正当だと思います。
ほぼ同時に質問者さんも自己解決していたようなので、そこは質問者様にご判断をお任せして「area-bさんのご回答をBAにするか、自己解決でいいかと思います」と申し上げました。
そのようにご理解いただければ。
実は問題解決したのは二人の優しい方のおかげで解決することができました。大変感謝をしています。そして、私のほうで最初回答反応が示されたのはMhyさんで、そのあとすぐにーｂさんのほうの回答がきましました。なので私本人はMhyさんにBAに選びたいと思ったのですが、コメントはBAにすることができず、そこでおそらくラグというかなどの理由でややこしくなったかと思います。Mhyさんによりプログラマーさんたちの譲り合いの暖かい精神を見ることができたので、自分は問題解決よりこちらのほうがより大切であると思います。まことにありがとうございます。
あなたの回答
tips
プレビュー
