0

ユーザーがボタン（数字または数学記号の値）をクリックしてからワークスペースをクリックすると、対応する文字が表示されるWebアプリを開発しています。これまでのところ、これは私がJavascriptに対して持っているものです：

<script type="text/javascript">
            var mathCanvas = document.getElementById("matharea");
            var ctx = mathCanvas.getContext("2d");
            ctx.font="18px Arial";

            var boolOne = 0;
            var boolTwo = 0;

            function insertOne(){
                boolOne = 1;
            };

            function insertTwo(){
                boolTwo = 1;
            };

            mathCanvas.onclick = function(event){
                var x = event.offsetX;
                var y = event.offsetY;
                if(boolOne == 1){
                    ctx.fillText("1",x-5,y-5);
                    boolOne = 0;
                };

                if(boolTwo == 1){
                    ctx.fillText("2",x-5,y-5);
                    boolTwo = 0;
                };
            };
</script>

現在、私は1ボタンと2ボタンのみを使用してテストしています。2つの'if'ステートメントでは、数値を配置した後、ブール値を0に戻しましたが、ワンショットではなく、別の数値ボタンが押されるまで、ユーザーが対応する数値を配置し続けることを許可する方が明らかに良いでしょう。私がここに持っている機能。別の特定のボタンが押されたときにブール値をリセットすることを想像できますが、他のボタンが押されたときにブール値を0に戻すにはどうすればよいですか？

4

1 に答える 1

1

ロジックを少し変更して、より柔軟にすることができます。何かのようなもの：

var placementCallback = function() {}
function onButton1Click() {
 placementCallback = function(x, y) {
   ctx.fillText('1', x-5,y-5);
 }
}

function onButton2Click() {
 placementCallback = function(x, y) {
   ctx.fillText('2', x-5,y-5);
 }
}

mathCanvas.onclick = function(event){
  placementCallback(event.offsetX, event.offsetY);
}

このように、大規模な if 条件がなく、好きなだけボタンを構築できます (また、「ユーザーが望む回数」の要件も満たします。配置コールバックです。

それが役立つことを願っています。

于 2012-11-13T20:45:16.343 に答える