Positioning styled Dom elements

p5.js Coding Questions
1

I am having trouble positioning a checkbox after calling the style.transform function to scale it. In posting this I am finding similar topics using select() but am still unsure.

Below, my goal would be that the checkbox is scaled, and the position is changed within draw.

Thank you all for your time!

var checkbox;

function setup() {
  createCanvas(400, 400);
  checkbox = createCheckbox('hello world', false);
  checkbox = checkbox.elt.getElementsByTagName('input')[0];
  checkbox.style.transform = 'scale(2)';
}

function draw() {
  background(220);
  checkbox.position(width / 2, height / 2);
}

example sketch here: https://editor.p5js.org/TedCharlesBrown/sketches/1TOoFvT9o

1 Like
2 
var checkbox;

function setup() {
  createCanvas(400, 400);
  checkbox = createCheckbox('hello world', false);
  checkbox.position(width / 2, height / 2);
  checkbox.style.transform = 'scale(2)';

//??  checkbox = checkbox.elt.getElementsByTagName('input')[0];
}

function draw() {
  background(220);
}

reassigning checkbox to something else makes it unusable as pointer to the checkbox.

1 Like