配列のおさらい
var fname = ['山田','佐藤','小林','藤井'];
var sname = ['太郎','花子','幸子','大地'];
この全組み合わせを<ul>内のリストに表示。
手順:
1.親要素を取得 getElementById
2.子要素を生成 createElement
3.コンテンツを入れる innerHTML
4.親要素に追加 appendChild
毎回よくミスってるところ
→
1.「getElementById」も「createElement」もその前にdocument.が必要
2.その時には()の中はシングルコート
3.appendChildでeleを追加するときは()内にシングルコートは不要
--->test3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
<link rel="stylesheet" href="test3.css">
</head>
<body>
<h1></h1>
<ul id="hoge"></ul>
<script src="test3.js"></script>
</body>
</html>
--->test3.js
//配列
var fname = ['山田','佐藤','小林','藤井'];
var sname = ['太郎','花子','幸子','大地'];
hoge = document.getElementById('hoge');
for(j=0; j<4; j++){ //苗字fnameに関して
for(i=0; i<4; i++){ //名前snameに関して
var ele = document.createElement('li');
if(i==1 || i==2){
var lname=' さん';
}else{
var lname=' くん';
}
ele.innerHTML = fname[j]+sname[i]+lname;
hoge.appendChild(ele);
}
}
オブジェクト指向の時はたいてい、
オブジェクト.メソッド(メソッドとは処理のこと)
と記述。もうひとつは、
オブジェクト.プロパティ=値
innerHTMLはプロパティのほう。
hoge.appendChild(ele); ←これはメソッドのほう。
シングルコートで囲まれているのは例外なく定数。
文字列定数という。
HTML上にidとして名付けられたhogeに、何かを代入しちゃうとかはできない。あくまでただの名前(文字列定数)なので。
eleは変数なので、シングルコートで囲むと逆に「そんな定数ないよ」と言われてしまう。
eleには中身があり、この場合変数の中身は、「document.createElement('li');」である。