HTML - attributes - onclick
revision: January 28, 2025
Content
"onclick" attribute: mouse click on an element.
top
The fires when there is a mouse click on the element. event attributes and can be used on any HTML element .
syntax
top
<element onclick="script"></element>
script : the script to be run on onclick.
some examples
top
Click me
A function is triggered when the button is clicked. The function outputs some text in a p element.
codes:
<button style="margin-left:3vw;" onclick="clickMe()">Click me</button>
<p style="margin-left:3vw;" id="click1"></p>
<p style="margin-left:3vw;">A function is triggered when the button is clicked.
The function outputs some text in a p element.</p>
<script>
function clickMe() {
document.getElementById("click1").innerHTML = "Hello World";
}
</script>
Click me to change my text color.
A function is triggered when the p element is clicked. The function sets the color of the p element to red.
codes:
<p class="spec" style="margin-left:3vw;" id="click2" onclick="changeMe()">
Click me to change my text color.</p>
<p class="spec" style="margin-left:3vw;">A function is triggered when the
p element is clicked. The function sets the color of the p element to red.</p>
<script>
function changeMe() {
document.getElementById("click2").style.color = "red";
}
</script>
click events with mouse
click button with mouse
click me!
code:
<button type="button">click me!</button>
<style>
button { width: 20vw; height: 4vw; background-color: blue; border: none; outline: none; cursor: pointer;
color: white; font-size: 1.6vw; border-bottom: 0.4vw solid currentColor;}
button{margin: 2vw; color: white; border-radius: 4vw; transition: background-color 300ms, transform 300ms;}
button:hover {background-color: skyblue; transform: scale(1.1);}
button:active {background-color: red; transform: scale(0.8);}
</style>
click link with mouse to go to webpage
code:
<div>
<a href="https://www.google.com" target="_target">check me out!</a><br>
<a href="http://www.facebook.com" target="_blank">visit Facebook</a><br />
</div>
<style>
a:not(h2~a){display: inline-block; box-sizing: border-box; position: relative; margin-left: 3vw;
width: 15vw; height: 2vw; text-align: left;
color: black; background-size: 150%;}
a:link {color: blue; text-decoration: none;}
a:hover {text-decoration: underline; }
a:active {color: darkblue;}
a::after {position: absolute; right:-4px; top: 6px; width: 1.5vw; height: 1.5vw;
background-size: 100%;}
a[download]::after {content: ""; background-image: url("download.png");}
a[href$=".pdf"][download]::after {content: ""; background-image: url("pdf.png");}
a[href*="facebook.com"]::after {content: ""; background-image: url("fb.png");}
a[href^="https://"]::before{content: "Secure link: ";}
</style>
click with mouse to download
code:
<div>
<a href="../images/car2.jpg" download>download picture</a><br/>
<a href="../images/blog-20-12-13.pdf" download>download PDF</a><br/>
</div>
<style>
a:not(h2~a){display: inline-block; box-sizing: border-box; position: relative; margin-left: 3vw;
width: 15vw; height: 2vw;
text-align: left; color: black; background-size: 150%;}
a:link {color: blue; text-decoration: none;}
a:hover {text-decoration: underline; }
a:active {color: darkblue;}
a::after {position: absolute; right:-4px; top: 6px; width: 1.5vw; height: 1.5vw;
background-size: 100%;}
a[download]::after {content: ""; background-image: url("download.png");}
a[href$=".pdf"][download]::after {content: ""; background-image: url("pdf.png");}
</style>
click the picture to focus it
film camera
add to cart
code:
<div class="product-card" tabindex="0">
<img class="product-image" src="../../images/camera.png" alt="camera" />
<h1 class="name">film camera</h1>
<button class="cart-button">add to cart</button>
</div>
<style>
:root {--blue: #74bcdd; --dark-blue: #2d3e51; --red: #f74442; --yellow: #fbca32; --green: #5be95b;
--grey: #ebeced;}
/*click to focus */
.product-card { width: 30vw; height: 35vw; margin: 0 auto; background-color: white;
box-shadow: 0 0 2vw rgba(0, 0, 0, 0.15);
outline: none; cursor: pointer; overflow: hidden;}
.product-image {width: 80%; height: 16vw; background-color: var(--blue); display: block;
object-fit: contain; transition: height 300ms,
background-color 300ms;}
.name {margin: 1vw; font-size: 3vw;}
.cart-button { margin-left: 1vw;}
.product-card:focus > .product-image { height: 22vw; background-color: var(--dark-blue);}
</style>
simple click event
code:
<div>
<button id="clickButton">Click me!</button>
<p id = "output"></p>
</div>
<style>
#clickButton{ color: blue; text-transform: uppercase; }
</style>
<script>
const clickButton = document.getElementById('clickButton');
const outputDiv = document.getElementById("output");
clickButton.addEventListener('click', function(event) {
outputDiv.innerHTML += 'Clicked!'+ JSON.stringify(event) + "<br>";
});
</script>
