{"id":11780,"date":"2016-04-05T16:15:25","date_gmt":"2016-04-05T13:15:25","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=11780"},"modified":"2018-01-10T16:27:09","modified_gmt":"2018-01-10T14:27:09","slug":"javascript-onclick-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/","title":{"rendered":"Javascript Onclick Example"},"content":{"rendered":"<p>The aim of this example is to show you how to handle the onclick event.<\/p>\n<p>A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, we can add JavaScript code to an HTML onclick event attribute . <\/p>\n<p>The onclick event fires on a mouse click on the element. <\/p>\n<p>This attribute&#8217;s value is the script to be run .<\/p>\n<p>It&#8217;s syntax is like <code>&lt;element onclick=\"script\"&gt;<\/code> . All the HTML tags support this attribute, EXCEPT:<code> &lt;base&gt;, &lt;bdo&gt;, &lt;br&gt;, &lt;head&gt;, &lt;html&gt;, &lt;iframe&gt;, &lt;meta&gt;, &lt;param&gt;, &lt;script&gt;, &lt;style&gt;, and &lt;title&gt; <\/code>.<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;tCIwOngQUb3zSUuF&#8217;]<\/p>\n<h2>1. HTML<\/h2>\n<p>First of all you need to create two simple html documents.<\/p>\n<p><span style=\"text-decoration: underline\"><em>onclickExample.html<\/em><\/span><\/p>\n<pre class=\"brush:xml;\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;jQuery Onclick Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h2>2. Javascript Onclick Examples<\/h2>\n<h3>2.1 Onclick Hello World<\/h3>\n<p>Let\u2019s add the following simple html code.<\/p>\n<pre class=\"brush:xml;highlight:[2]\">\r\n    &lt;form&gt;\r\n\t&lt;input type=\"button\" onclick=\"sayHello()\" value=\"Say Hello\" \/&gt;\r\n    &lt;\/form&gt;\r\n<\/pre>\n<p>As you can notice, in this simple example we give <code>sayHello()<\/code> method to the onclick attribute. When user click the button onclick will fire and call this method. The <code>sayHello()<\/code> method&#8217;s content is very simple where shows an alter to demonstrate onclick event had been fired. <\/p>\n<pre class=\"brush:js; highlight:[3]\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\tfunction sayHello() {\r\n\t   alert(\"Hello World\");\r\n\t}\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>The result in the browser would be:<br \/>\n<figure id=\"attachment_11795\" aria-describedby=\"caption-attachment-11795\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample.gif\" rel=\"attachment wp-att-11795\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample.gif\" alt=\"Onclick Hello World\" width=\"800\" height=\"298\" class=\"size-full wp-image-11795\" \/><\/a><figcaption id=\"caption-attachment-11795\" class=\"wp-caption-text\">Onclick Hello World<\/figcaption><\/figure><\/p>\n<h3>2.2 Change background color by the onclick event<\/h3>\n<p>In this example, the onclick attribute&#8217;s value is a javascript. The given javascript changes document background color by changing <code>document.bgColor<\/code> attribute value. Inserting script code inside onclick attribute isn&#8217;t recommended, put your script in a method and call it inside onclick attribute. <\/p>\n<pre class=\"brush:xml;highlight:[2,3,4]\">\r\n&lt;form&gt;\r\n\t&lt;input type=\"radio\" name=\"Color\" onclick=\"document.bgColor='#E27A7A'\" \/&gt; Color 1&lt;br\/&gt;\r\n\t&lt;input type=\"radio\" name=\"Color\" onclick=\"document.bgColor='#657ACA'\" \/&gt; Color 2&lt;br\/&gt;\r\n\t&lt;input type=\"radio\" name=\"Color\" onclick=\"document.bgColor='#60CA94'\" \/&gt; Color 3&lt;br\/&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<p>The result in the browser would be:<br \/>\n<figure id=\"attachment_11797\" aria-describedby=\"caption-attachment-11797\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample2.gif\" rel=\"attachment wp-att-11797\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample2.gif\" alt=\"Change background color by the onclick event\" width=\"800\" height=\"300\" class=\"size-full wp-image-11797\" \/><\/a><figcaption id=\"caption-attachment-11797\" class=\"wp-caption-text\">Change background color by the onclick event<\/figcaption><\/figure><\/p>\n<h3>2.3 Attach the onclick event by using the addEventListener() method<\/h3>\n<p>Let\u2019s add the following simple html code.<\/p>\n<pre class=\"brush:xml;\">\r\n&lt;h1 id=\"title\"&gt;Javascript onclick example 3 &lt;\/h1&gt;\r\n&lt;input type=\"text\" id=\"myTextField\"\/&gt;\r\n&lt;input type=\"submit\" id=\"byBtn\" value=\"Change\" \/&gt;\r\n<\/pre>\n<p>The javascript addEventListener() method is used to attach an event to the HTML elements. The addEventListener() method takes two arguments, the first is the event name and the second is a function&#8217;s name that we want to be called. In the following example, the line 3 attach the onclick event to the byBtn button. <\/p>\n<pre class=\"brush:js; highlight:[2,3]\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\tvar byBtn = document.getElementById('byBtn');\r\n\tbyBtn.addEventListener (\"click\",change);\r\n\t\r\n\tfunction change(){\r\n\t   var myNewTitle = document.getElementById('myTextField').value;\r\n\t   if( myNewTitle.length==0 ){\r\n\t\t   alert('Write Some real Text please.');\r\n\t\t   return;\r\n\t   }\r\n\t   var title = document.getElementById('title');\r\n\t   title.innerHTML = myNewTitle;\r\n\t} \r\n&lt;\/script&gt;\r\n<\/pre>\n<p>The result in the browser would be:<br \/>\n<figure id=\"attachment_11805\" aria-describedby=\"caption-attachment-11805\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample_3.gif\" rel=\"attachment wp-att-11805\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample_3.gif\" alt=\"Attach a onclick event by using the addEventListener() method\" width=\"800\" height=\"300\" class=\"size-full wp-image-11805\" \/><\/a><figcaption id=\"caption-attachment-11805\" class=\"wp-caption-text\">Attach the onclick event by using the addEventListener() method<\/figcaption><\/figure><\/p>\n<h3>2.4 The Div onclick event handling<\/h3>\n<p>Let\u2019s add the following simple html code.<\/p>\n<pre class=\"brush:xml;\">\r\n&lt;h1&gt;\r\n   &lt;div id=\"demo\" style=\"border:1px solid #f00;padding:10px;width:750px\"&gt;Click me.&lt;\/div&gt;\r\n&lt;\/h1&gt;\r\n<\/pre>\n<p>Setting of an anonymous function to the HTML elemnt&#8217;s onclick attribute will fire the given function on click this element. In the following example, we set an anonymous method to the DIV element and this is enough to bind a handler to the DIV element&#8217;s onclick event.<\/p>\n<pre class=\"brush:js; highlight:[2]\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\tdocument.getElementById(\"demo\").onclick = function() {myFunction()};\r\n\r\n\tfunction myFunction() {\r\n\t\tdocument.getElementById(\"demo\").innerHTML = \"YOU CLICKED ME!\";\r\n\t}\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>The result in the browser would be:<br \/>\n<figure id=\"attachment_11807\" aria-describedby=\"caption-attachment-11807\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample4.gif\" rel=\"attachment wp-att-11807\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample4.gif\" alt=\"The Div onclick event handling\" width=\"800\" height=\"300\" class=\"size-full wp-image-11807\" \/><\/a><figcaption id=\"caption-attachment-11807\" class=\"wp-caption-text\">The Div onclick event handling<\/figcaption><\/figure><\/p>\n<h3>2.5 Access &#8220;this&#8221; object inside onclick method<\/h3>\n<p>Let\u2019s add the following simple html code.<\/p>\n<pre class=\"brush:xml; highlight:[2]\">\r\nToggle the checked state of the following checked box:&lt;br \/&gt;&lt;br \/&gt;\r\n&lt;input type=\"checkbox\" onclick=\"OnChangeCheckbox(this)\" id=\"myCheckbox\" \/&gt;\r\n&lt;label for=\"myCheckbox\"&gt;Sample check box&lt;\/label&gt;\r\n<\/pre>\n<p>This example shows how to detect when the checked state of an input checkbox element is changed.<br \/>\nAs you can notice, the &#8220;this&#8221; object can be passed to the onclick handler method as <code>OnChangeCheckbox(this)<\/code>.<br \/>\nInside an event handler, this references the current element. It can be used to get properties on modify the element.<br \/>\nWe can use the passed element directly in the handler method as line 2 of the following javascript code. <\/p>\n<pre class=\"brush:js; highlight:[3]\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\tfunction OnChangeCheckbox (checkbox) {\r\n\t\tif (checkbox.checked) {\r\n\t\t\talert (\"The check box is checked.\");\r\n\t\t}\r\n\t\telse {\r\n\t\t\talert (\"The check box is not checked.\");\r\n\t\t}\r\n\t}\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>The result in the browser would be:<br \/>\n<figure id=\"attachment_118578\" aria-describedby=\"caption-attachment-118578\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample5.gif\" rel=\"attachment wp-att-11857\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample5.gif\" alt=\"Access &quot;this&quot; object inside onclick method\" width=\"800\" height=\"300\" class=\"size-full wp-image-11857\" \/><\/a><figcaption id=\"caption-attachment-118578\" class=\"wp-caption-text\">Access &#8220;this&#8221; object inside onclick method<\/figcaption><\/figure><\/p>\n<h3>2.6 Javascript get x and y coordinates on mouse click<\/h3>\n<p>Let\u2019s add the following simple html code.<\/p>\n<pre class=\"brush:xml; highlight:[2]\">\r\n   &lt;img src=\"circle.png\" id=\"circleImage\" style=\"position:absolute;left:20px;right:20px;\" width=\"50\" height=\"50\"\/&gt;\r\n<\/pre>\n<p>Handling mouse click event in the onclick event handler method is very simple. The event object can be used to get the mouse coordinates on mouse click.<br \/>\nThe following example demonstrates how to deal with event object.  <\/p>\n<pre class=\"brush:js; highlight:[2,3,4,11]\">\r\n&lt;script type=\"text\/javascript\"&gt;\r\n        function printMousePos(event) {\r\n\t    var x = event.clientX ;\r\n\t    var y = event.clientY;\r\n\t    var circleImage = document.getElementById(\"circleImage\");\r\n\t    circleImage.style.position=\"absolute\";\r\n\t    circleImage.style.left=x+\"px\";\r\n \t    circleImage.style.top=y+\"px\";\r\n\t}\r\n\r\n\tdocument.addEventListener(\"click\", printMousePos);\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>The result in the browser would be:<br \/>\n<figure id=\"attachment_11865\" aria-describedby=\"caption-attachment-11865\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample_6.gif\" rel=\"attachment wp-att-11865\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascriptOnclickExample_6.gif\" alt=\"Javascript get x and y coordinates on mouse click\" width=\"800\" height=\"300\" class=\"size-full wp-image-11865\" \/><\/a><figcaption id=\"caption-attachment-11865\" class=\"wp-caption-text\">Javascript get x and y coordinates on mouse click<\/figcaption><\/figure><\/p>\n<h2>3.Conclusion<\/h2>\n<p>A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, we can add JavaScript code to an HTML onclick event attribute. The onclick event is the most frequently used event type. You can put your validation, warning etc., against this event type. It&#8217;s syntax is like <code>&lt;element onclick=\"script\"&gt;<\/code> . The javascript addEventListener() method is used to attach an event to the HTML elements too. Setting of an anonymous function to the HTML elemnt&#8217;s onclick attribute will attach an onclick event to this element. <\/p>\n<h2>4. Download the Source Code<\/h2>\n<div class=\"download\"><strong>Download: <\/strong>You can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/03\/javascript_onclick_example.zip\"><strong>Javascript Onclick Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The aim of this example is to show you how to handle the onclick event. A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, we can add JavaScript code to an HTML onclick event attribute . &hellip;<\/p>\n","protected":false},"author":106,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-11780","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Javascript Onclick Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to show you how to handle the onclick event. A JavaScript can be executed when an event occurs, like when a user clicks on an\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Javascript Onclick Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to show you how to handle the onclick event. A JavaScript can be executed when an event occurs, like when a user clicks on an\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-05T13:15:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-10T14:27:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Saeb Najim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Saeb Najim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/\"},\"author\":{\"name\":\"Saeb Najim\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/7554117e1066be33eda4c81bac192cc9\"},\"headline\":\"Javascript Onclick Example\",\"datePublished\":\"2016-04-05T13:15:25+00:00\",\"dateModified\":\"2018-01-10T14:27:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/\"},\"wordCount\":734,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/\",\"name\":\"Javascript Onclick Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2016-04-05T13:15:25+00:00\",\"dateModified\":\"2018-01-10T14:27:09+00:00\",\"description\":\"The aim of this example is to show you how to handle the onclick event. A JavaScript can be executed when an event occurs, like when a user clicks on an\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Javascript Onclick Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/7554117e1066be33eda4c81bac192cc9\",\"name\":\"Saeb Najim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1a6884eb32867720ef22a2a7728235120963a9a750d54d0356d5e3619ad3cd06?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1a6884eb32867720ef22a2a7728235120963a9a750d54d0356d5e3619ad3cd06?s=96&d=mm&r=g\",\"caption\":\"Saeb Najim\"},\"description\":\"Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\",\"https:\/\/www.linkedin.com\/in\/saebnajim\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/saeb-najim\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Javascript Onclick Example - Web Code Geeks - 2026","description":"The aim of this example is to show you how to handle the onclick event. A JavaScript can be executed when an event occurs, like when a user clicks on an","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/","og_locale":"en_US","og_type":"article","og_title":"Javascript Onclick Example - Web Code Geeks - 2026","og_description":"The aim of this example is to show you how to handle the onclick event. A JavaScript can be executed when an event occurs, like when a user clicks on an","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-04-05T13:15:25+00:00","article_modified_time":"2018-01-10T14:27:09+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Saeb Najim","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Saeb Najim","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/"},"author":{"name":"Saeb Najim","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/7554117e1066be33eda4c81bac192cc9"},"headline":"Javascript Onclick Example","datePublished":"2016-04-05T13:15:25+00:00","dateModified":"2018-01-10T14:27:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/"},"wordCount":734,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/","name":"Javascript Onclick Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2016-04-05T13:15:25+00:00","dateModified":"2018-01-10T14:27:09+00:00","description":"The aim of this example is to show you how to handle the onclick event. A JavaScript can be executed when an event occurs, like when a user clicks on an","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-onclick-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Javascript Onclick Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/7554117e1066be33eda4c81bac192cc9","name":"Saeb Najim","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1a6884eb32867720ef22a2a7728235120963a9a750d54d0356d5e3619ad3cd06?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1a6884eb32867720ef22a2a7728235120963a9a750d54d0356d5e3619ad3cd06?s=96&d=mm&r=g","caption":"Saeb Najim"},"description":"Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.","sameAs":["http:\/\/www.webcodegeeks.com\/","https:\/\/www.linkedin.com\/in\/saebnajim"],"url":"https:\/\/www.webcodegeeks.com\/author\/saeb-najim\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/11780","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=11780"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/11780\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=11780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=11780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=11780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}