外観の設計(ボタン編)

最初に断っておくが、動作確認はGoogle Chromeで実施している。実はMicrosoft Edgeでは動作していない。

レイアウト各部の実装

ボタン部分

ボタン1個1個は、下記のようなhtmlで作成している。

<input type=”button” style=”width:30px;” id=”b00″ value=” ” onclick=”pushed(‘b00’);”>

実際に1個配置すると↓のようになる。

(註:ブログのcssファイルとの兼ね合いで、ボタンの色を変えています)

onclick内に記述したpushed関数で、ボタンに表示する数字を変更するJavaScriptを記述している。

function pushed(val){
    var btn = document.getElementById(val);
    if (btn.value == " "){
        btn.value = "1";
    } else if (btn.value == '?'){
        btn.value = 1;
    } else if (btn.value == 9){
        btn.value = ' ';
    } else {
        btn.value = parseInt(btn.value) + 1;
    }
}

ボタンに表示している文字が” ”(スペース)または”?”の場合にボタンを押されると、ボタンに表示する数字を1に変更する。9の場合はスペースに、1~8の場合は1を足した数字を表示するようにしている。実際の挙動は上に配置したボタンを押して確認していただきたい。

冒頭でMicrosoft Edgeで動作しないと書いてあるが、このJavaScriptに関しては動作することを確認済みである。ブログにpushed関数を埋め込んであるため、ちゃんと動作するはずである。動かない場合はJavaScriptの動作をOFFにしていないか、確認願いたい。それでも動かない場合は連絡頂けると助かる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です