idを使ってエレメント(要素)ノードを探します
document.getElementById("main")
例では、このページ(document)のなかで,Idが(ById)mainであるようなエレメント(Element)を見つけ(get)ます。
次のようなエレメントノードが見つかります。id="main"だからです。
<div id="main">ひとつのページに同じ値のidはありません。</div>
見つかったノードに名前をつけて名前で指定することができます。
var mynode = document.getElementById("main");
こうすると mynode という名前で id="main" なエレメントノードを指定できるということです。
クリックされたボタンの数字の画像が黄色い丸になります。ボタンに対応した id の要素を探して見つかった要素の画像を入れ替えています
1 2 3 4 5 6 7 8 Clear
①②③④⑤...の画像を置く所(一部省略) それぞれの画像タグに id を指定しています。
<img src="images/n1.png" alt="" id="n1" /> <img src="images/n2.png" alt="" id="n2" /> ......
押しボタン(1~8とclear)の部分(一部省略) それぞれのボタンに対応する id を指定してスクリプトを呼び出すように書いています。
<span onclick="changeimg('n1')">1</span> <span onclick="changeimg('n2')">2</span> ...... <span onclick="clearimg()">Clear</span>
プログラム本体。changeimg(nid)は nid で id を受け取りその id に合致するエレメントのソースを変更します。
function changeimg(nid){ var kaerutokoro = document.getElementById(nid); kaerutokoro.src="images/nof.png"; }
clearimg()は n1 から n8 までの id をつくり、全部の id に合致するエレメントのソースを変更し、元の画像にもどします。
function clearimg(){ var i; for(i=1;9>i;i++){ nid = "n" + i; document.getElementById(nid).src = "images/" + nid +".png"; } }