Question

我正在开发一个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按钮进行测试。在两个'if'语句中，我在放置数字后将布尔值设置回0，但显然最好允许用户继续放置相应的数字，直到按下另一个数字按钮，而不是一次性功能我在这里。我可以想象当按下另一个特定按钮时重置布尔值，但是当按下任何其他按钮时如何将其更改回0？

Answer 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条件，并且您可以根据需要构建尽可能多的按钮（并且它满足您的“用户需要的次数”要求，前提是您提供了他们的放置回调的实现是。

希望有所帮助。

保持Javascript中的布尔值不变，直到单击另一个按钮

1 个答案: