for文を使ってこの4つの項目をリストに入れてください。
からあげは消す。
for文のなかのiも、宣言なく使うのはお行儀が悪いらしい。
for(var i=0; i<foods.length; i++){
と書いてしまってもいい。
--->回答
<script>
var foods = ['おにぎり','カレー','餃子','ラーメン'];
var ul = document.getElementById('chart');
for(var i=0; i<foods.length; i++){
var ele = document.createElement('li');//リストアイテムを新規作成
ele.innerHTML = foods[i];//配列からｎ番目を呼び出し、その内容を生成したリストに入れる
ul.appendChild(ele);//ulに子要素eleを追加
}
</script>
⭐配列は常にブラケット[]を使って、号車番号（インデックス）でアクセスする。
さて作りたいのは色のコードです。
216色ぶんも#CFFとか配列に入力してられない。
#の次に続くのは0,3,6,9,C,Fと仮定して、
var foodsをvar cnumに変えてfor文のなかもcnumに。
#000 -> #003 -> #006 #009 #00c #00fと表示させたい。
末尾だけ配列から拾ってこればいい。
文字列結合して、最後のとこだけくっつけよう。
ついでにワンアクション置いて色コードを変数に入れておこう。
同じ色コードを文字だけじゃなく背景色にもしたいから。
すべての要素オブジェクトはスタイルシートで定義可能な全プロパティにアクセスできる。
ただスタイルシートはなにかとハイフンで表現する
しかしjsはハイフンはマイナスととらえてエラーになる。
js上でスタイルシートの表現をするときはハイフンをドット？キャメルケース？になおさないといけないらしい（どっちか聞き落とした）
→ほかのサイトより：
>この時に、CSSプロパティはキャメルケースで記述しなければいけないので注意が必要です！ 例えば、「font-size」を指定したければ「style.fontSize」と記述する必要があるわけです。
キャメルケースかな？
文字を見やすくしてシャドウもいれて
ボーダーの色も背景色にあわす
--->ここまで
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web Safe Color</title>
<style>
body{
background:#cfc;
}
#chart{
list-style-type:none;
padding:0;
display:flex;
flex-wrap:wrap;
}
#chart li {
box-sizing:border-box;
width: 16.66%;
text-align:center;
padding:1rem;
border: solid 1px #cfc;
text-shadow: 1px 1px 1px #fff;
font-size: 1.4rem;
}
</style>
</head>
<body>
</ul>
<script>
var cnum = ['0','3','6','9','C','F'];
var ul = document.getElementById('chart');
for(var i=0; i<6; i++){
var ele = document.createElement('li');
var code = '#00'+cnum[i];
ele.innerHTML = '#00'+cnum[i];
ele.style.background = code;
console.log(code);
ul.appendChild(ele);
}
</script>
</body>
</html>
しかしこれでは1行しかない。
もっと行数が欲しい。
ループの中にループを置きたいが
iだと混乱するから
いま動かしているのはblueなのでループカウンタをbに変える。5か所変更。
→for文を新たなfor文で包む。これはgreenを変化させる。ループカウンタはg
中身も#00に文字列接続してると変化しないので、'#0'+cnum[g]+cnum[b];とする
→さらに外側をfor文で包んで、今度はredを変化させる。ループカウンタはr
色コードの記述は'#'+cnum[r]+cnum[g]+cnum[b];となる。
--->できあがり
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web Safe Color</title>
<style>
body{
background:#cfc;
}
#chart{
list-style-type:none;
padding:0;
display:flex;
flex-wrap:wrap;
}
#chart li {
box-sizing:border-box;
width: 16.66%;
text-align:center;
padding:1rem;
border: solid 1px #cfc;
text-shadow: 1px 1px 1px #fff;
font-size: 1.4rem;
}
</style>
</head>
<body>
</ul>
<script>
var cnum = ['0','3','6','9','C','F'];
var ul = document.getElementById('chart');
for(var r=0; r<6; r++){
for(var g=0; g<6; g++){
for(var b=0; b<6; b++){
var ele = document.createElement('li');
var code = '#'+cnum[r]+cnum[g]+cnum[b];
ele.innerHTML = '#'+cnum[r]+cnum[g]+cnum[b];
ele.style.background = code;
console.log(code);
ul.appendChild(ele);
}
}
}
</script>
</body>
</html>
---
