🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!


Reading time 2 min
Published Aug 10, 2017
Updated Oct 10, 2019

onclick JavaScript: Main Tips

  • The onclick JavaScript event occurs when the user clicks on an element.
  • It runs a specified line of code when you click a HTML object that has the onclick attribute.
  • The JavaScript onclick functions can be triggered by object.onclick or object.addEventListener.
  • The addEventListener method is not supported by earlier versions of Internet Explorer (8 and below).
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Syntax and Usage of onclick

The following code snippets demonstrate the proper syntax of applying the JavaScript button onclick event. You should specify the object you want to affect and indicate the onclick function in JavaScript you wish to execute.

Regular syntax: object.onclick = function(){my_script};

Using the addEventListener method: object.addEventListener("click", my_script);

Example shows the current date when text was clicked:

<button onclick="getElementById('test').innerHTML = Date()">This will show date when clicked.</button>

See how this example changes the text color when clicked:

function myFunction() {
    document.getElementById("test").style.color = "red";

The code in next example also changes text color, but does it by using a slightly different method:

function myFunction(element,clr) {
    element.style.color = clr;

In the example below, copies text on click:

function myFunction() {
    document.getElementById("field2").value = document.getElementById("field1").value;

Clicking changes the color of the background in our window.onclick example:

window.onclick = myFunction;
function myFunction() {    
  document.getElementsByTagName("BODY")[0].style.backgroundColor = "lime";   

When onclick Is Used

The JavaScript onclick event is one of the most frequently utilized event types. It's a common practice to enhance websites by adding some functionality such as JavaScript button click or other elements.

The JavaScript onclick function is designed to execute code when users interact with the HTML elements. The onclick JavaScript can be applied to any HTML element.