Question

在画布上使用JS，我在画布上移动了一个球。它工作正常。

我在HTML中创建了一个按钮元素，我想要这个函数，＆＃34; changeBallDirection（）＆＃34;被称为onclick。

changeBallDirection（）应该改变变量xBallDirection，它应该改变球的方向。

变量xBallDirection不会改变。我在画布上打印了xBallDirection以确认它没有改变。代码如下。第一次发帖，所以请告诉我我可能犯下的礼仪的任何基本违规行为。感谢。

                <script type="application/processing" data-processing-target="pjs">
                void setup() {
                    size(400, 400);
                };
                frameRate(20);
                var r=0;
                var xBallDirection = 1;
                var changeBallDirection = function (direction) {
                    xBallDirection = direction;
                };
                //draw ball on canvas and move to the right
                void draw() {
                    fill(45, 56, 99);
                    ellipse(100+r, 34, 34, 34);
                    r=r+xBallDirection;
                    //I printed xBallDirection here so that I could see if it changed when the button was pushed
                    text(xBallDirection,50,50);
                };

            </script>

            <button style="width: 100px; height: 100px; background:blue" onclick="changeBallDirection(-10)">Ball Left</button>

            <canvas id="pjs"> </canvas>

Answer 1

changeBallDirection不在全局命名空间中，因此无法在onclick事件中调用。单击按钮时，您应该在控制台中获得类似ReferenceError: changeBallDirection is not defined的内容。

将函数移到脚本的draw（）部分之外，一切都应该可以正常工作。

HTML按钮不会改变JS变量

1 个答案: