0

I have been attempting to create a drawing in p5.js that draws a circle when the selected radio button is clicked, but when I click a radio button, the drawing does not change.

Radio button html:

<input type="radio" name="radionbutton" value="1" id="button1"/>
<input type="radio" name="radionbutton" value="2" id="button"/>

Javascript:

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

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

  background(218, 24, 132);

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

function setup() {
  myCanvas = createCanvas(400, 400);

  drawDonut();
}

I just need simple code and not too advanced, thank you.

haydenb
  • 3
  • 4
  • 1
    I think this question was posted a couple of days ago. Folks suggested you add an event listener to your buttons, or use the [`.checked` property](https://stackoverflow.com/questions/9618504/how-to-get-the-selected-radio-button-s-value). Have you tried that? As was mentioned, the return value of `getElementById` is the element (or null if not found), so assuming it's in the document, it'll always be truthy. – ggorlen May 29 '23 at 00:01
  • The call to `drawDonut()` inside `setup` doesn't do anything, because it only runs once when the canvas is initialized. It doesn't have any way of checking whether the user has selected one of your radio buttons. Instead, you should add an event listener to each radio button (documentation for `onchange` event: https://www.w3schools.com/jsref/event_onchange.asp) and call your drawDonut function from the event listener – Quack E. Duck May 29 '23 at 00:01
  • @ggorlen LOL, we commented the same thing at the same time :) – Quack E. Duck May 29 '23 at 00:03
  • Thank you both! I was able to figure it out. – haydenb May 29 '23 at 00:26

0 Answers0