{"id":11970,"date":"2020-12-01T16:49:00","date_gmt":"2020-12-02T00:49:00","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=11970"},"modified":"2023-12-01T04:05:08","modified_gmt":"2023-12-01T12:05:08","slug":"javascript-onclick","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/","title":{"rendered":"JavaScript Onclick: A Step-By-Step Guide"},"content":{"rendered":"\n

The JavaScript onclick event executes a function when a user clicks a button or another web element. This method is used both inline in an HTML document and in a JavaScript document. <\/em><\/p>\n\n\n\n

\n\n\n\n

When you are coding in JavaScript, it\u2019s common to want to run code when a user interacts with the web page. For example, you might want something to happen when a user presses a button. But how do you implement this functionality in JavaScript?<\/p>\n\n\n\n

That\u2019s where the \u201conclick()\u201d event can be useful. The onclick event is one of the most commonly used event types. onclick allows you to run code when a user clicks a button or another element on your web page.<\/p>\n\n\n\n

In this short guide, we\u2019re going to break down how the onclick function works. We’ll discuss how you can use onclick in your code to make a website interactive.<\/p>\n\n\n\n

Event Refresher<\/strong><\/h2>\n\n\n\n

Onclick is a type of JavaScript event. Events are actions that take place in the browser that can either be started by the user or the browser itself. A user clicking a button, submitting a form, or pressing a key on their keyboard are all examples of events in action. In this tutorial, we\u2019ll focus on the first one: a user clicking an element.\n\n<\/p>\n\n\n\n

By using events, developers can make a web page interactive. You could make a form visible when the user clicks a button, or display a message to a user when they submit a form.\n\n<\/p>\n\n\n\n

There are two main components to events: event handlers, and event listeners.\n\n<\/p>\n\n\n\n

When you click a button, press a key, or hover over an element, an event is run. The event handler is the code that runs when your event starts. For example, when you click a button, the event handler will run. \n\n<\/p>\n\n\n\n

The event listener is part of an element\u2014like a button\u2014that \u201clistens\u201d and waits until you interact with it. Then, the listener executes the event handler.<\/p>\n\n\n\n

JavaScript onclick<\/strong><\/h2>\n\n\n\n

The JavaScript onclick event executes a function when you click on a button or another web element. For instance, an onclick event can trigger a dialog box to appear when you clock on a button.<\/p>\n\n\n\n

Here is the syntax for the onclick method in HTML:<\/p>\n\n\n\n

&lt;button onclick="codetorun"&gt;Click me&lt;\/button&gt;<\/pre><\/div>\n\n\n\n
When this HTML button<\/a> is clicked, the “codetorun” JavaScript function will execute. We can use onclick with other elements, like a div. onclick is not exclusive to buttons.<\/p>\n\n\n\n
You can also use onclick in plain JavaScript. Here is an example of a JavaScript onclick method:<\/p>\n\n\n\n
var item = document.getElementById("button");\nitem.onclick = function() {\n\tcodetoexecute...\n}<\/pre><\/div>\n\n\n\n
We use the JavaScript getElementById method<\/a> to retrieve an element from our web page. When we click on the element with the ID “button” our onclick function will execute.<\/p>\n\n\n\n
Button onclick JavaScript Example<\/h2>\n\n\n\n
Let\u2019s say you want to change some text on a web page after you click on a p element, or a paragraph. We can use the onclick attribute to implement this feature on a website. Let\u2019s start with an HTML page with a button and some text. We\u2019ll also create a JavaScript file that will hold our event code.\n\n<\/p>\n\n\n\n
index.html\n\n<!DOCTYPE html>\n<html>\n\n<head>\n\t<title>onclick example<\/title>\n<\/head>\n<!-- Main body of code -->\n<body>\n\t<button>Click here.<\/button>\n\n\t<p>This text will change when you click the button.<\/p>\n<\/body>\n\n<!-- Reference our JavaScript event code -->\n<script src=\u201djs\/onclick.js\u201d><\/script>\n\n<\/html>\n<\/pre><\/div>\n\n\n\n
This is an example of a basic web page, but it\u2019s not interactive yet. When this web page runs, we\u2019ll see a button and some text, but nothing will happen when we click our button. That\u2019s because we haven\u2019t implemented the onclick script function yet.\n\n<\/p>\n\n\n\n
Now that our web page is ready, we can start to create our onclick event. We first need to add the onclick() event listener to our button. This event will listen for when the user clicks on the button.\n\n<\/p>\n\n\n\n
index.html\n\n...\n<body>\n\t<button onclick=\u201dchangeParagraph()\u201d>Click here.<\/button>\n\n\t<p>This text will change when you click the button.<\/p>\n<\/body>\n\u2026\n<\/pre><\/div>\n\n\n\n
Let\u2019s create our \u201conclick.js\u201d file, which will hold the code for our changeParagraph() event. This event will change the text of our paragraph (the \u201cp\u201d element) with something else.<\/p>\n\n\n\n
onclick.js\n\nconst changeParagraph = () => {\n\tconst paragraph = document.querySelector(\u201cp\u201d);\n\tparagraph.textContent = \u201cThis text has changed because you clicked the button.\u201d\n}\n<\/pre><\/div>\n\n\n\n
We have defined a JavaScript function<\/a> called changeParagraph. We use the JavaScript querySelector method<\/a> to select a paragraph on our page. When we first load the page, we\u2019ll see our button and text that says, \u201cThis text will change when you click the button.\u201d<\/p>\n\n\n\n
After we click the button, our web page changes and shows our new text:
<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Summary<\/strong><\/h2>\n\n\n\n
Overall, onclick() is a type of JavaScript event that allows you to run certain code when an element on the web page is clicked.<\/p>\n\n\n\n
That\u2019s it! By using the code above, we have successfully created a webpage that will run code when we press a button. While our code above only changes text, you can make it as complicated or as simple as you would like.<\/p>\n\n\n\n
If you want a user to be alerted when they click the button, you can use the alert() function in JavaScript. If you want to add \u201cif\u201d statements into your code, you can do that as well.<\/p>\n\n\n\n
For more JavaScript learning resources, check out our How to Learn JavaScript guide<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"The JavaScript onclick event executes a function when a user clicks a button or another web element. This method is used both inline in an HTML document and in a JavaScript document. When you are coding in JavaScript, it\u2019s common to want to run code when a user interacts with the web page. For example,…","protected":false},"author":240,"featured_media":12308,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[12687],"class_list":{"0":"post-11970","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-tutorial"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nJavaScript Onclick: A Step-By-Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"The onclick event allows developers to make webpages interactive. Learn more about JavaScript events, and how to use onclick in this article.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Onclick: A Step-By-Step Guide\" \/>\n<meta property=\"og:description\" content=\"The onclick event allows developers to make webpages interactive. Learn more about JavaScript events, and how to use onclick in this article.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-02T00:49:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:05:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-onclick.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"JavaScript Onclick: A Step-By-Step Guide\",\"datePublished\":\"2020-12-02T00:49:00+00:00\",\"dateModified\":\"2023-12-01T12:05:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/\"},\"wordCount\":818,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-onclick.jpg\",\"keywords\":[\"tutorial\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/\",\"name\":\"JavaScript Onclick: A Step-By-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-onclick.jpg\",\"datePublished\":\"2020-12-02T00:49:00+00:00\",\"dateModified\":\"2023-12-01T12:05:08+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The onclick event allows developers to make webpages interactive. Learn more about JavaScript events, and how to use onclick in this article.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-onclick.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-onclick.jpg\",\"width\":1200,\"height\":675,\"caption\":\"JavaScript Onclick\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/careerkarma.com\/blog\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Onclick: A Step-By-Step Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Onclick: A Step-By-Step Guide | Career Karma","description":"The onclick event allows developers to make webpages interactive. Learn more about JavaScript events, and how to use onclick in this article.","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:\/\/careerkarma.com\/blog\/javascript-onclick\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Onclick: A Step-By-Step Guide","og_description":"The onclick event allows developers to make webpages interactive. Learn more about JavaScript events, and how to use onclick in this article.","og_url":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-12-02T00:49:00+00:00","article_modified_time":"2023-12-01T12:05:08+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-onclick.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"JavaScript Onclick: A Step-By-Step Guide","datePublished":"2020-12-02T00:49:00+00:00","dateModified":"2023-12-01T12:05:08+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/"},"wordCount":818,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-onclick.jpg","keywords":["tutorial"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-onclick\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/","url":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/","name":"JavaScript Onclick: A Step-By-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-onclick.jpg","datePublished":"2020-12-02T00:49:00+00:00","dateModified":"2023-12-01T12:05:08+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The onclick event allows developers to make webpages interactive. Learn more about JavaScript events, and how to use onclick in this article.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-onclick\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-onclick.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-onclick.jpg","width":1200,"height":675,"caption":"JavaScript Onclick"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-onclick\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Onclick: A Step-By-Step Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/11970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=11970"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/11970\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/12308"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=11970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=11970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=11970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}