ansaurus

Question

How to call Processing.js function from HTML?

Answer 1

A:

I would start by pulling the javascript for the onclick out of the img tag.

In a separate javascript file you can have:

document.getElementById('restartimage').onclick = function() { Processing.setup(); }

Obviously I put an id attribute on your img tag.

The setup function I noticed on this page: http://processingjs.org/

The basic idea is that by pulling the onclick into a javascript file it will be easier to code what it should do.

James Black 2009-09-12 06:14:51

I tried this, but in my error console, I see, "document.getElementById('restartimage') is null". Did I correctly add the ID attribute to my img tag? <img src="restart-image.png" id="restartimage">

David 2009-09-14 22:08:29

Just make certain that your javascript runs after this page is rendered, but, you have the id tag listed properly. Hopefull you also have an end tag (</img>).

James Black 2009-09-14 23:59:49

Answer 2

A:

you need to change the script-type to text/javascript or application/javascript first.

then place 'function' before 'restart()' function reducing 'void'.

i have used firefox 3.0.14 on ubuntu 9.04.

Sadat 2009-09-12 06:16:13

Actually, in HTML5, the default is text/javascript, so the script tags don't need a type or a language.

Rich Bradshaw 2009-09-12 06:43:46

I tried this, but then the Processing.js code didn't run.

David 2009-09-14 22:00:13

I have tested as belowHTML file:<html> <head> <script language="javascript" src="processing.js"></script> </head> <body><canvas> You'll need a browser that supports HTML5 to see this content. </canvas><br /><br /> <img src="restart.png" onclick="restart()"> </body></html>JS file:function restart() { /* does something */alert('hello'); }

Sadat 2009-09-16 05:01:27

Answer 3

A:

You can call processing functions using the Processing js object's getInstanceById function.

For example here is a function:

$(window).resize(function(){
    var p=Processing.getInstanceById('processing_canvas_id');
    p.resize($("#main").width(),$("#main").height());
  });

Where resize is my processing function inside the processing file associated with *processing_canvas_id*.

Magneon 2010-07-17 16:53:22

Answer 4

A:

This should work, enclose you image inside the anchor tag <a> image </a> Use href tag to call the function.

<a href="javascript:restart()"> image source </a>

Manivasagan 2010-08-17 07:05:01

ansaurus

tags:

views:

answers:

How to call Processing.js function from HTML?

related questions