如何让我的按钮改变一个变量？

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 变量中注明的数量增加或减少椭圆的当前大小。

如何让我的按钮改变一个变量？

How to I make my button change a variable?

javascript

p5.js