如何让选中的单选按钮改变p5.js绘图？代码问题求助

问题分析与修正步骤： #

• ID不匹配：HTML里第二个单选按钮的id是button，但JS里用getElementById("button2")获取，导致button2变量为null，先把HTML里的id改成button2。
• 判断逻辑错误：当前代码只是判断按钮元素是否存在，而不是判断按钮是否被选中，要改成检查button1.checked和button2.checked。
• 缺少点击事件：单选按钮点击后没有触发重绘，需要给两个按钮绑定click事件，触发drawDonut函数。

修正后的完整代码： #

HTML部分：

<input type="radio" name="radionbutton" value="1" id="button1" checked/>
<label for="button1">大深灰圆</label>
<input type="radio" name="radionbutton" value="2" id="button2"/>
<label for="button2">小紫棕圆</label>

JavaScript部分：

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");

function drawDonut() {
  console.log("Redrawing our donut!");

  background(218, 24, 132);

  if (button1.checked) {
    fill(20, 20, 20);
    circle(100, 100, 200);
  } else if (button2.checked) {
    fill(70, 10, 100);
    circle(10, 40, 50);
  }
}

function setup() {
  myCanvas = createCanvas(400, 400);
  // 给单选按钮绑定点击事件
  button1.addEventListener('click', drawDonut);
  button2.addEventListener('click', drawDonut);
  // 初始绘制
  drawDonut();
}

内容的提问来源于stack exchange，提问作者haydenb