HTML5: Button Onclick

**otacon** · 06-25-2012, 06:25 AM

Dear developer gurus,

Need some help here. Am starting to dabble in App Dev and chose HTML5 as it seems to be easier, and I have 'some' very basic knowledge in html language. Used to study C++ but kinda forgot most of it now

I have actually completed writing the frame of the app, but am stuck at a certain point:

I have a button, which is shown in code below:
<p><center><button><img src="BeginTest.gif"/></button></center></p>

If I want to display a picture upon clicking the button, how should the code be like? Do I need a separate javascript running in the body?

Would appreciate some help. Can send you the code if you want to have a look.

**recompile** · 06-25-2012, 03:22 PM

You could use the onClick attribute in the button tag or attach an event to the element like element.addEventListener('click',function,false)

This explains it all: Advanced event registration models

You may want to pickup a book on javascript and work through a few examples.

**otacon** · 06-25-2012, 08:25 PM

Thanks. I'll check it out.

**ignites** · 06-28-2012, 02:31 PM

<p><center><button><img src="BeginTest.gif" onclick="dosomething()"/></button>
</center>
</p>

<script>
function dosomething(){
//write some code to show an image.
}</script>

**otacon** · 06-29-2012, 12:49 AM

Yup. Got that earlier.

onclick=window.onload(......)

Thanks for helping...

**Superfly_FR** · 06-29-2012, 04:41 AM

Originally Posted by otacon

I have a button, which is shown in code below:
<p><center><button><img src="BeginTest.gif"/></button></center></p>

I strongly suggest you first get some HTML5/CSS updates. For example, the code for your button is "illegal" regarding current W3C guidelines ... Moreover, you may have to find workarounds (using JS) that are not anymore necessary to handle simple tasks that will throw you in compatibility issues.

Originally Posted by otacon

onclick=window.onload(......)

nope ... ;-)

Here's a working sample that may lead you to learnings. I've tried both to include basic JS variables manipulation: some are passed by the function call (theImage,imgHeight,imgWidth), one is hardcoded in the function (myImageUrlPath). Tried also to keep the HTML code simple but (almost) clean. Note that the use of CSS styling "inline" for the div/button may (should) have been done with a Style definition (<style></style>) inside the header (<head></head>) section ... but nobody's perfect ;-)

[HTML]
<!DOCTYPE HTML>
<html>
<head>
<title>My image poper page</title>
<script type="text/javascript">
// function to display an image, with three parameters (image to display, its height, its width)
function showImage(theImage,imgHeight,imgWidth) {

var myImageUrlPath = "http://actu-mobiles.fr/wp-content/uploads/2012/02/";
// where are full size images stored
window.open(myImageUrlPath + theImage, "imgPopup", "menubar=no, status=no, scrollbars=no, height="+imgHeight+", width="+imgWidth);
// opens a popup with image inside, sized to the proper dimension

}
</script>
</head>
<body>
<div id="myRootDiv" style="text-align:center; width:100%;">
<form id="myForm">
<input type="button" id="myButton" style="height:169px; width:98px; background-color:transparent; border:none; background-image:URL('http://cdn-store.crackberry.com/store_images/product_images/smartphones/blackberry_mini/1410_98x169.png')" onclick="showImage('blackberry_bold9900_450_3.jpg' ,'500','500')">
</form>
</div>
</body>
</html>
[/HTML]Remember ... little steps after little steps :
1/ HTML5
2/ CSS3 (you'll be surprised, can handle a lot of things we previously made with JS)
3/ Javascript

Hope it helps.