How does this page call the action on button click

Question

On this page, http://html2canvas.hertzen.com/screenshots.html

The screenshot button is generating a screenshot of the page supplied on the text box.

I tried to view the source of the page and inspect element but I can't find how the function to generate the screenshot was made. There is no onclick made on the button.

I'd like to do something similar using his html2canvass js but instead of appending it to the bottom of the page, I want to save as jpeg the supplied website url.

Anyone has and Idea how this can be done? I am assuming that onclick would do but I don't get the part that call the function to generate the screenshot.

I'd like to dynamically generate an image version of my html lyrics so that user can have an option to view my lyrics on html or save it as jpeg.

sample lyrics: http://prompter.rareapps.org/prompt/prompt-save.php?p=123

Thanks

Answer 1

You can access the element from js to add an onclick event:

Your button (or link, or div or what ever):

<input type="button" value="Click me" id="button" />

Native javascript:

document.getElementById('button').onclick=function () {
   // Do your magic here
};

Or with jQuery:

$('#button').click(function () {
   // Do your magic
});

You can also access the object by class, or by its parent or by its content, not just id.

Example: http://jsfiddle.net/N8j8p/