如何使按钮更改变量？

Question

如何使按钮更改变量？

我是编程新手，甚至对p5.js还是新手，在尝试创建一个非常基本的绘图软件时遇到了这个问题。 我可以用计算机上的一个键很好地绘制以及更改颜色，但是现在我试图添加一个功能，您可以在其中更改光标的大小以绘制更大或更小的线条。 我在屏幕上创建了一个按钮，但无法弄清楚如何执行上述任务。 我试图制作一个函数，当您单击该按钮时，该函数似乎可以正常工作，但是我无法弄清楚该怎么做或在代码中的位置。

function draw() {
    let yel = color(255, 255, 0);
    let red = color(255, 0, 0);
    let black = color(0);
    let green = color(0, 255, 0);
    let blue = color(0, 0, 255);

    var size;

    if(mouseIsPressed) {
        noStroke();

        if(keyIsPressed) {
            if(keyCode === UP_ARROW) {
                fill(red);
            }else if(keyCode === RIGHT_ARROW) {
                fill(green);
            }else if(keyCode === LEFT_ARROW) {
                fill(blue);
            }else {
                fill(black);
            }
        }

        if(mouseButton === LEFT) {
            ellipse(mouseX, mouseY, size, size);
        }
    }
}

我上面提到的功能当前不在代码中。 显示的所有代码都可以正常工作。 我在html文档中有一个带有onclick事件的按钮，以激活功能“ S1”。

Answer 1

您只需要在按钮（ https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener ）上添加事件侦听器，然后在其中运行代码：

 document.addEventListener('DOMContentLoaded', function() { var supaCoolButton = document.querySelector('.supa_cool_button') supaCoolButton.addEventListener('click', function() { console.log('Call functions in here!') // You would invoke `draw()` here. }) }) 

 <button class="supa_cool_button">Check me out.</button> 

如果您愿意共享更大的代码段，我们可以向您展示如何更好地合并该功能。

Answer 2

我获得了一些创作自由，并想出了一些可能对您有所帮助的东西。 我假设没有任何修饰，您希望您的项目看起来像这样：

 function setup(){ createCanvas(400, 200); background(120); } function draw() { let yel = color(255, 255, 0); let red = color(255, 0, 0); let black = color(0); let green = color(0, 255, 0); let blue = color(0, 0, 255); if(mouseIsPressed) { noStroke(); if(keyIsPressed) { if(keyCode === UP_ARROW) { fill(red); }else if(keyCode === RIGHT_ARROW) { fill(green); }else if(keyCode === LEFT_ARROW) { fill(blue); }else { fill(black); } } if(mouseButton === LEFT) { ellipse(mouseX, mouseY, size, size); } } } var size = 2; var increment = 2; function increaseSize(){ size += increment; strokeWeight(size); document.getElementById("currentsize").innerHTML = size; } function decreaseSize(){ if(size > increment) size -= increment; strokeWeight(size); document.getElementById("currentsize").innerHTML = size; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script> <div id="controls"> <button onclick="increaseSize()">BIGGER</button> <button onclick="decreaseSize()">SMALLER</button> <label id="currentsize">2</label> </div> 

需要注意的是更改size变量的范围，将S1()函数重命名为更有意义的内容以及HTML中的其他按钮和标签。 每个函数都将按increment变量中指出的数量来增大或减小椭圆的当前大小。