0729　JavaScript: inner.HTML - WEBはじめました

inner.HTML

id名の付いたタグのテキストを書き換える

書き換える文字列にHTMLタグを含める事ができる

document.getElementById( ‘id名’ ).innerHTML = ‘書き換えテキスト’ ;

変数にしても指定できる

var a = document.getElementById( ‘id名’ );

a.innerHTML = ’書き換えテキスト’;

クリックで画像を変える（ループ）

<!DOCTYPE HTML>

<head>

<title>画像の切り替え</title>

<style>

html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,

address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {

margin: 0;

padding: 0;

line-height: 1.0;

}

img {

border: 0;

vertical-align: bottom;

cursor: pointer; //カーソルを変更する

}

body{

margin: 20px auto;

width: 481px;

height: 320px;

}

</style>

//配列を作成し各インデックスにsrcで参照

var img = new Array();

img[0] = new Image;

img[0].src = 'img/01.jpg';

img[1] = new Image;

img[1].src = 'img/02.jpg';

img[2] = new Image;

img[2].src = 'img/03.jpg';

img[3] = new Image;

img[3].src = 'img/04.jpg';

img[4] = new Image;

img[4].src = 'img/05.jpg';

//画像番号用のグローバル変数

var cnt = 0;

/* 任意のグローバル変数が配列のlengthのmax値になった時0に戻り、それ以外は++のif文を作る

→img srcをimg[変数].srcに指定 */

function changeImg(){

if(cnt == 4){

cnt = 0;

} else {

cnt++;

}

document.getElementById('photo').src = img[cnt].src;

}

</script>

</head>

<body>

<p>

// img id onclickで関数呼び出し→src,alt指定

</p>

</body>

</html>