jsWaffleでAndroidアプリを作ろう！インド式九九編③

サクウェブＴＶはコチラ↓↓↓

JavaScriptからボタンを配置する

さて、ではscript.jsにJavaScriptを記述していきましょう。

まずは、インド式九九の20×20に対応するために数字の1～20までのボタンを作りましょう。

index.htmlの中の

<div id="button_space"></div>

にボタンを挿入します。

HTMLで直接<button>を入れていってもいいのですが、20個も書くのは面倒ですしソースも汚くなるので私はJavaScriptで一気に入れてしまうのが好きです。

var button_str = "";

として、buttonタグのHTMLを入れる変数を用意します。

そして、

for(var i=1;i<=20;i++){
    	if(i%5==0){
			button_str += "<button>" + i + "</button><br/>";
		}else{
			button_str += "<button>" + i + "</button>";
		}
	}

でHTMLを生成します。

if(i%5==0)で分岐しているのはボタンを５個ずつで改行して表示をきれいにするためです。

これでbutton_strにHTMLが代入されましたので、これを一気に

<div id="button_space"></div>

に挿入します。

$("#button_space").html(button_str);

ちなみに、jQueryではなくjsWaffleで挿入する場合は、

$("button_space").innerHTML = button_str;

とすればいいです。

さて、これでボタンが配置されました。

＞＞jsWaffleでAndroidアプリを作ろう！インド式九九編④＜＜