jsWaffleでAndroidアプリを作ろう！インド式九九編⑦
サクウェブＴＶはコチラ↓↓↓
これでセレクト式の表示が完成しましたので、選択リストから段の選択がなされたら、九九の結果を表示するプログラムを組み込みましょう。
では、選択後に計算処理をし、九九の結果表示をHTML内に挿入するための関数を定義します。
script2.jsに以下を記述して下さい。
$("#select_space select").change(calc);
function calc(){
alert("動きました！");
}
選択リストからいずれかを選択すると「動きました！」をいうアラートダイアログが表示されるはずです。
これで選択リストからcalc関数を呼び出すことができるようになりました。
では、functionの中身を書きかえていきましょう。
function calc(){
var val = Number($(this).val());
alert(val);
}
選択リストから何かを選択すると選択した段の数字がアラートダイアログで表示されます。
今回はval()メソッドで選択した要素、つまり前回の記事でJavaScriptから挿入したoptionタグのなかのvalue属性を抽出できます。
つまり、選択した段の数字を抽出できたということです。
抽出した数字は変数valに格納されています。
したがって、この後はvalに１～２０の数字を掛けていく処理を記述すればよいことになります。
functionをさらに書きかえます。
function calc(){
var val = Number($(this).val());
var calc_str = "";
if(val!=0){
for(var i=1;i<=20;i++){
calc_str += "<p>● " + val + "×" + i + "=" + (val*i) + "</p>";
}
$("#calc_display").html(calc_str);
}
}
if(val!=0)で分岐しているのは「表示したい段を選択してください」を選択した場合には処理を実行しないようにするためです。
ちなみに「表示したい段を選択してください」の部分のoptionタグは前回の記事のJavaScript内の
select_str += "<option value='0'>表示したい段を選択してください</option>";
の部分です。
if文の最後の
$("#calc_display").html(calc_str);
でselect.htmlの
<div id="calc_display"></div>
にcalc_strに追加していった計算結果のpタグを挿入しています。
これで完成です。
以下、スクリプト全文です。
$(function(){
var select_str = "<select>";
select_str += "<option value='0'>表示したい段を選択してください</option>";
for(var i=1;i<=20;i++){
select_str += "<option value='" + i + "'>" + i + "の段</option>";
}
select_str += "</select>";
$("#select_space").html(select_str);
$("#select_space select").change(calc);
function calc(){
var val = Number($(this).val());
var calc_str = "";
if(val!=0){
for(var i=1;i<=20;i++){
calc_str += "<p>● " + val + "×" + i + "=" + (val*i) + "</p>";
}
$("#calc_display").html(calc_str);
}
}
});
次の記事でアプリ全体を実行してみます。
