jsWaffleでAndroidアプリを作ろう！インド式九九編④
サクウェブＴＶはコチラ↓↓↓
次に、ボタンが押されたときに押された数字×（１～２０）を計算し、その結果を表示するための関数を定義します。
表示される場所はindex.htmlの
<div id="calc_display"></div>
の部分です。
まずは動作確認を含めてテストの関数を定義してみましょう。
$("#button_space button").click(calc);
function calc(){
alert("動きました！");
}
実行すると、ボタンを押したときに「動きました！」というアラートダイアログが表示される筈です。
これで、各ボタンからcalc関数を呼び出すことができましたので、functionの中身を書き換えていきましょう。
ビギナーの方でもわかりやすいようにテストを重ねていく書き方をします。
function calc(){
var num = Number($(this).html());
alert(num);
}
実行すると、ボタンを押したときに押した番号の数字がアラートダイアログで表示されるはずです。
これで押した番号を抽出することが可能となりました。つまり、今後の計算は変数numへの掛け算で処理を記述すればよいことになります。
このように変数に現在何が代入されているかをalert()で確認しながら、意図しない値の代入が行われないように注意していく方法が、プログラミングに不慣れな方にはよいかと思います。
慣れればこのアプリくらいのプログラムは確認なしで一気に書いて、後でブレークポイントを追加しながらデバッグしていく方法もできるようになります。
さらに、functionを書きかえます。
numの中身を整形して書き出す処理を記述しましょう。
まず、書き出すHTMLを入れる変数を用意します。
var calc_str = "";
次にnumに１～２０の数字を掛けながらcalc_strにpタグを追加していきます。
for(var i=1;i<=20;i++){
calc_str += "<p>● " + num + "×" + i + "=" + (num*i) + "<p>";
}
これで、必要なHTMLがcalc_strに全て追加されましたので、あとは
<div id="calc_display"></div>
に挿入するだけです。
$("#calc_display").html(calc_str);
全体のソースは以下のようになります。
$(function(){
var button_str = "";
for(var i=1;i<=20;i++){
if(i%5==0){
button_str += "<button>" + i + "</button><br/>";
}else{
button_str += "<button>" + i + "</button>";
}
}
$("#button_space").html(button_str);
$("#button_space button").click(calc);
function calc(){
var num = Number($(this).html());
var calc_str = "";
for(var i=1;i<=20;i++){
calc_str += "<p>● " + num + "×" + i + "=" + (num*i) + "</p>";
}
$("#calc_display").html(calc_str);
}
});
これを実行して番号のボタンを押すと、番号の下にずらっと計算結果が表示されるはずです。
できました（笑）
非常に簡単ですね。
次の記事からはセレクト式でも作ってみます。
