javascript onclick

The javascript onclick function is Mouse Event type, which is used to perform many different tasks within HTML, such as javascript onclick alert, redirect, CSS effects, copy text, etc.

We have some examples of javascript button onclick, after seeing which you can learn how to call javascript function on button click in HTML.

Javascript Onclick Function

<button id=”myid” onclick=”TextFunction()”>Onclick Javascript </button>

function TextFunction() {
    document.getElementById(“myid”).innerHTML = “New Text Added”;
}

Output: The text of the button will be New Text Added from Onclick Javascript.

If you already have some content and you want to update it on the HTML button onclick, then for that you have to see the example given below.

<button onclick=”TextFunction()”>Click To Update Text </button>
<p id=”myid”>Demo content </p>

function TextFunction() {
    document.getElementById(“myid”).innerHTML = “Text Updated”;
}

Output: The text of the button will be Text Updated from Demo content

But if you want to show any new text on button onclick, then follow the example below.

<button onclick=”TextFunction()”>Click To Add Text </button>
<p id=”myid”> </p> – – – – New text will be added inside this empty element

function TextFunction() {
    document.getElementById(“myid”).innerHTML = “New Text Added”;
}

Output: (New Text Added)

If you do not want to use the button, you can also run the onclick function directly above the text element.

<p id=”myid” onclick=”TextFunction()”>Click To Add Text </p>

function TextFunction() {
    document.getElementById(“myid”).innerHTML = “New Text Added”;
}

Output: (New Text Added)

Javascript Onclick Alert

<button onclick=”AlertFunction()”>Click To Alert </button>

function AlertFunction() {
            alert(‘You are getting alert here’);
}

Javascript Onclick CSS

With onclick function, you can also apply CSS.

<button onclick=”CSSFunction()”>Click To Change Color </button>
<p id=”myid”>Please change my color </p>

function CSSFunction() {
    document.getElementById(“myid”).style.color = “pink”;
}


/***** Without Using Button *****/

<p id=”myid” onclick=”CSSFunction()”>Please change my color </p>

function CSSFunction() {
    document.getElementById(“myid”).style.color = “pink”;
}


/***** Change the color of all the text inside the div *****/

<button onclick=”CSSFunction()”>Click To Change Color </button>

<div id=”myid”>
	<p>Please change my color </p>
	<h1>Please change my color </h1>
</div>


function CSSFunction() {
    document.getElementById(“myid”).style.color = “pink”;
}


/***** Change the background color of the element *****/

<button onclick=”CSSFunction()”>Click To Change Color </button>

<div id=”myid”>
	<p>Please change my color </p>
	<h1>Please change my color </h1>
</div>


function CSSFunction() {
    document.getElementById(“myid”).style.background = “pink”;
}

If you want to give many styles to your element at once, then you have to adopt this method.

<button onclick=”CSSFunction()”>Click To Change Color </button>

<div id=”myid”>
            <p>Please change my color </p>
            <h1>Please change my color </h1>
</div>

function CSSFunction() {
	document.getElementById(“myid”).style.background = “pink”;
	document.getElementById(“myid”).style.border = “5px solid”;
	document.getElementById(“myid”).style.padding = “20px”;
}

/***** Update Image Size Button Onclick *****/

<button onclick=”CSSFunction()”>Click To Update Size </button>

<img id=”myid” src=” my-image.jpg”>

function CSSFunction() {
	document.getElementById(“myid”).style.width = “200px”;
	document.getElementById(“myid”).style.height = “200px”;
}

Other Javascript Function

<button onclick=”getElementById(‘time’).innerHTML=Date()”>Click To Check Date & Time </button>

<p id=”time”> </p>

Browser Support

  • Edge
  • Firefox
  • Internet Explorer
  • Opera
  • Safari
  • Chrome

Frequently Asked Questions

We have answers to some questions that people search on the Internet everyday. Let us know what are those questions and what are their answers.

Where do I put CSS in HTML?
There are 3 ways to apply CSS, either you can link your file inside the head tag, or you can add inline CSS, or you can place your CSS on the same page with the

How do you put a full background image on HTML?
If you want to apply the full background image, then you can apply the image above your body tag. for example Background-image: URL (“myimage.jpg”).

What is div in HTML?
In simple language, div is a box inside which you set your elements.

How do I link CSS to HTML?
To link CSS with html, you can place your file inside the head tag. For example link rel = “stylesheet” href = “mystyle.css”

Note: All the examples shown in this article, we have tested before, you can use these examples without any difficulty.

Related: 5 Javascript Replace Method you must know