Run a javascript function from p5.js or read a variable in the DOM

p5.js Coding Questions
1

Hi everyone, it’s a pleasure to join this community! I have a problem that I think is quite simple for you but I have been banging my head for days for which I ask for your help.
I want to make a kind of universal watch so I need to know the difference between local time and Greenwich UTC. In P5 I have not found a specific function, as it exists in javascript and it is getTimezoneOffset ().

The questions I have not found answers are:

  • Can I launch a javascript function inside P5.js?
  • Or can I read the value of a variable set via javascript in the HTML that hosts my canvans P5.js?

Trying to solve the problem I tried to write the value of the UTC difference in the DOM of the page in this way.

<body onload="jsFunctions()">
<div id="offsetDiv">test</div>
<script>
function jsFunctions() {
  var d = new Date();
  var n = d.getTimezoneOffset();

 document.getElementById("offsetDiv").innerHTML = n;
}
</script>
</body>

Inside p5.js I tried to read the div value using the select function in various ways.

let offset = document.getElementById('offsetDiv').value;
or
let offset = select('#offsetDiv');

But an undefined value has always returned to me.
Can you help me out of it? Thanks!

1 Like
2

const tmz = +select('#offsetDiv').html();

or…

const tmz = offsetDiv.innerHTML;

1 Like
3

Unless I didn’t understand your problem, you can put your function directly in sketch.js, which is a javascript :slight_smile:

function setup() {
  createCanvas(400, 400);
  fill("white");
  var d = new Date();
  var n = d.getTimezoneOffset();
  text(d, 10, 10);
  text(n, 10, 30);
}
1 Like
4

Thanks a lot Yom, I knew it was a somewhat stupid question. Injecting JS code into my J5.js had been my first test but it hadn’t worked … I think for errors somewhere else. Anyway as you tell me it works, thanks for the time!