{"id":209,"date":"2022-12-09T11:44:33","date_gmt":"2022-12-09T11:44:33","guid":{"rendered":"https:\/\/www.devopssupport.in\/blog\/?p=209"},"modified":"2023-03-20T15:14:38","modified_gmt":"2023-03-20T15:14:38","slug":"javascriptdom-click-event","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/javascriptdom-click-event\/","title":{"rendered":"JavaScript(DOM) Click event"},"content":{"rendered":"\n<p>The onClick event is the commonly used events in JavaScript. It action occurs when an element is clicked . <\/p>\n\n\n\n<p><strong>How to onClick event works<\/strong><\/p>\n\n\n\n<p>First, you have to select the element to which you want to add the onClick&nbsp;event. we would use the &lt;button&gt; element.<\/p>\n\n\n\n<p>now, add an attribute to your element,an attribute is called onClick. This attribute&#8217;s value should to run when the element is clicked.<\/p>\n\n\n\n<p>Here&#8217;s what our code would look like with the onClick event added:<\/p>\n\n\n\n<p>Simple project on click event<\/p>\n\n\n\n<p>Make a file with name index.html<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/AvinashKumar33\/0d871acefcfb9b136bf8c79e42816e2c.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/12\/image-19-1024x309.png\" alt=\"\" class=\"wp-image-211\" width=\"840\" height=\"253\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/12\/image-19-1024x309.png 1024w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/12\/image-19-300x91.png 300w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/12\/image-19-768x232.png 768w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/12\/image-19-850x257.png 850w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/12\/image-19.png 1344w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p>After clicking this button the event has occurs<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"386\" height=\"209\" src=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/12\/image-21.png\" alt=\"\" class=\"wp-image-213\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/12\/image-21.png 386w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2022\/12\/image-21-300x162.png 300w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The onClick event is the commonly used events in JavaScript. It action occurs when an element is clicked . How to onClick event works First, you have&#8230; <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[86,46,45,85],"class_list":["post-209","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-click-event","tag-dom","tag-javascript","tag-onclick"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=209"}],"version-history":[{"count":2,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/209\/revisions"}],"predecessor-version":[{"id":256,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/209\/revisions\/256"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}