Javascript 如何使我的按钮更改为变量？

如何使按钮更改为变量

我对编程非常陌生，甚至对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”。

您只需在按钮（）中添加一个事件侦听器，然后在其中运行代码：

document.addEventListener（'DOMContentLoaded'，function（）{
var supaCoolButton=document.querySelector（“.supa\u cool\u button”）
supaCoolButton.addEventListener（'click'，function（）{
log（'在此处调用函数！'）
//您可以在这里调用'draw（）'。
})
})

---

看看我。

我有一些创造性的自由，想出了一些可能对你有帮助的东西。我假设，在没有任何修饰的情况下，您希望您的项目看起来像这样：

函数设置（）{
createCanvas（400200）；
背景（120）；
}
函数绘图（）{
设yel=color（255，255，0）；
设红色=颜色（255,0,0）；
设黑色=颜色（0）；
设绿色=颜色（0，255，0）；
设蓝色=颜色（0，0，255）；
如果（按下鼠标）{
仰泳（）；
如果（按键已按下）{
如果（键代码===向上箭头）{
填充（红色）；
}else if（键代码===右箭头）{
填充（绿色）；
}else if（键代码===左箭头）{
填充（蓝色）；
}否则{
填充（黑色）；
}
}
如果（鼠标按钮===左）{
椭圆（mouseX，mouseY，size，size）；
}
}
}
变量大小=2；
var增量=2；
函数increaseSize（）{
大小+=增量；
冲程重量（尺寸）；
document.getElementById（“currentsize”）.innerHTML=size；
}
函数decreaseSize（）{
如果（尺寸>增量）尺寸-=增量；
冲程重量（尺寸）；
document.getElementById（“currentsize”）.innerHTML=size；
}

更大的
更小
2.

Hi@Chrissant，你能分享一下你剩下的代码吗？