I01 ボタンクリックでINPUTフィールドへの出力文字を次々変える

このボタンはクリックされるごとにINPUTフィールドに次々と違うデータを書き出します。

応用:msg[x]='文章' を増やしたり書き換えてお使いください。
参照: function, var, new, Array(), value, if( ){ }else{ }, onClick, length,

Sample


Nextを何度もクリックしてみてください。



Source
ソース
(コピーしてお使いください)
<html>
<head>
<title></title>
<script language="JavaScript">
<!--

var i=0;

msg=new Array();
msg[0]='****はじまり*****';
msg[1]='むかしむかし';
msg[2]='あるところに';
msg[3]='おじいさんと';
msg[4]='おばあさんが';
msg[5]='住んでいました。';
msg[6]='おじいさんは山へ';
msg[7]='芝貼りにでかけました。';
msg[8]='****おしまい*****';

function SIMPLI01(indexNo){
    document.form1.fmsg.value=msg[indexNo]
}

//-->
</script>
</head>
<body>

<form name="form1">
<input type="button" value=" Next "
       onClick="SIMPLI01(i) ; if( i >= 8 ){ i=0 } else { i++ }">
<input type="text" name="fmsg">
Nextを何度もクリックしてみてください。
</form>

</body>
</html>
var i=0は、iという名前の変数を用意して = 以降の値(ここでは0)を入れます。この i は、ここではあとで 'むかしむかし' などの文を出すときにi番目の文を出すという風に使うためのものです

msg=new Array()で、msgという名前の配列を用意します。 その後、msg[番号]='文章'とすることで、msg[0],msg[1],msg[2],.....という名前の変数を作れます。これは、番号で変数を扱えるので便利です

functionは関数(複数のスクリプトをまとめて名前をつけたもの)を作る命令で、この場合のSIMPLI01(indexNo)は関数名です。indexNoはあとででてくるSIMPLI01(i)から i のデータを受取り、function内のmsg[indexNo]のindexNoという部分に渡します。つまり、もし、i が 5 ならmsg[indexNo]はmsg[5]となり、その中のデータは '住んでいました。' となります

document.form1.fmsg.value=msg[indexNo]は、form1という名前のフォームのfmsgという名前を付けたINPUTフィールドへmsg[indexNo]の値(つまり、'住んでいました。' )を入れる(表示する)と言う意味

onClick="命令文"でクリックしたら"命令文"を実行するという意味です

if(i>=8){i=0}else{i++}で、もし i が8(つまり、msg[8]='****おしまい*****')を超えたら i=0 (msg[0]='****はじまり*****')に戻し、もし、iが7以下ならi++します。i++ で、i に1を足すという意味です。ここでは、クリックするたびに、最初0だった i を1,2,3,4,....という風にiが8になるまで増加させています


Contents
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)


Maintained by
tato@fureai.or.jp works1997 Toshirou Takahashi