JavaScript onclick event

The onclick event generally occurs when the user clicks on an element. It allows the programmer to execute a JavaScript's function when an element gets clicked. This event can be used for validating a form, warning messages and many more.

Using JavaScript, this event can be dynamically added to any element. It supports all HTML elements except , , </a>, <a href="https://www.tutorialsinfo.com/html-style"><style></a>, <a href="https://www.tutorialsinfo.com/html-script-tag"><script></a>, <a href="https://www.tutorialsinfo.com/html-base-tag"><base></a>, <a href="https://www.tutorialsinfo.com/html-iframes"><iframe></a>, <a href="https://www.tutorialsinfo.com/html-bdo-tag"><bdo></a>, <a href="https://www.tutorialsinfo.com/html-br-tag"><br></a>, <a href="https://www.tutorialsinfo.com/html-meta-tag"><meta></a>,</strong> and <strong><a href="https://www.tutorialsinfo.com/html-param-tag"><param></a></strong>. It means we cannot apply the <strong>onclick</strong> event on the given tags.</p> <p>In HTML, we can use the <strong>onclick</strong> attribute and assign a <a href="https://www.tutorialsinfo.com/javascript-function">JavaScript function</a> to it. We can also use the JavaScript's <strong>addEventListener()</strong> method and pass a <strong>click</strong> event to it for greater flexibility.</p> <h3 class="h3">Syntax</h3> <p>Now, we see the syntax of using the <strong>onclick</strong> event in <a href="https://www.tutorialsinfo.com/html-tutorial">HTML</a> and in <a href="https://www.tutorialsinfo.com/javascript-tutorial">javascript</a> (without <strong>addEventListener()</strong> method or by using the <strong>addEventListener()</strong> method).</p> <h3 class="h3">In HTML</h3> <div class="codeblock"> <textarea name="code" class="xml"> <element onclick = "fun()"> </textarea> </div> <h3 class="h3">In JavaScript</h3> <div class="codeblock"> <textarea name="code" class="xml"> object.onclick = function() { myScript }; </textarea> </div> <h3 class="h3">In JavaScript by using the addEventListener() method</h3> <div class="codeblock"> <textarea name="code" class="xml"> object.addEventListener("click", myScript); </textarea> </div> <p>Let's see how to use <strong>onclick</strong> event by using some illustrations. Now, we will see the examples of using the <strong>onclick</strong> event in HTML, and in JavaScript.</p> <h3 class="h3">Example1 - Using onclick attribute in HTML</h3> <p>In this example, we are using the <a href="https://www.tutorialsinfo.com/html-button-onclick">HTML <strong>onclick</strong></a> attribute and assigning a JavaScript's function to it. When the user clicks the given button, the corresponding function will get executed, and an alert dialog box will be displayed on the screen.</p> <div class="codeblock"> <textarea name="code" class="xml"> <!DOCTYPE html> <html> <head> <script> function fun() { alert("Welcome to the tutorialsinfo.com"); } </script> </head> <body> <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> <button onclick = "fun()">Click me</button> </body> </html> </textarea> </div> <span class="testit"><a href="https://www.tutorialsinfo.com/oprweb/test.jsp?filename=javascript-onclick-event1" target="_blank">Test it Now</a></span> <p><strong>Output</strong></p> <img src="/public/file/JavaScript/javascript-onclick-event.png" alt="JavaScript onclick event"> <p>After clicking the given button, the output will be -</p> <img src="/public/file/JavaScript/javascript-onclick-event2.png" alt="JavaScript onclick event"> <h3 class="h3">Example2 - Using JavaScript</h3> <p>In this example, we are using JavaScript's <strong>onclick</strong> event. Here we are using the <strong>onclick</strong> event with the paragraph element.</p> <p>When the user clicks on the <a href="https://www.tutorialsinfo.com/html-paragraph">paragraph</a> element, the corresponding function will get executed, and the text of the paragraph gets changed. On clicking the <strong><p></strong> element, the <a href="https://www.tutorialsinfo.com/html-background-color">background color</a>, size, border, and color of the text will also get change.</p> <div class="codeblock"> <textarea name="code" class="xml"> <!DOCTYPE html> <html> <head> <title> onclick event

This is an example of using onclick event.

Click the following text to see the effect.

Click me

Test it Now

Output

JavaScript onclick event

After clicking the text Click me, the output will be -

JavaScript onclick event

Example3 - Using addEventListener() method

In this example, we are using JavaScript's addEventListener() method to attach a click event to the paragraph element. When the user clicks the paragraph element, the text of the paragraph gets changed.

On clicking the paragraph, the background color and font-size of elements will also change.

Test it Now

Output

JavaScript onclick event

On clicking the text Click me, the output will be -

JavaScript onclick event
Next TopicJavaScript dblclick event




Hot Tutorials

Contact US

Email:[email protected]

JS onclick event
10/30