To call a javascript function from html you need to use events like onclick()
, onkeyup()
, onmouseover()
etc. and pass the javascript function as argument.
Code Example –
1. Calling JS function from html onclick()
–
<button onclick="runOnClick()">Click Me!!</button>
<script>
function runOnClick() {
alert('Button Clicked');
}
</script>
2. Calling JS function from html onblur()
–
<input type="text" id="fname" onblur="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
3. Calling JS function from html onchange()
–
<input type="text" id="fname" onchange="upperCase()">
<script>
function upperCase() {
const x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
4. Calling JS function from html onselect()
–
<input type="text" value="Hello world!" onselect="myFunction()">
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "You selected some text";
}
</script>
5. Calling JS function from html onsubmit()
–
<form onsubmit="confirmInput()" action="/code-example-call-javascript-function-from-html">
Enter your name: <input id="fname" type="text" size="20">
<input type="submit">
</form>
<script>
function confirmInput() {
fname = document.forms[0].fname.value;
alert("Hello " + fname + "!");
}
</script>
6. Calling JS function from html onkeypress()
–
<input type="text" onkeypress="myFunction()">
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
7. Calling JS function from html onmouseover()
–
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>
8. Calling JS function from html onmousedown()
–
<div onmousedown="WhichButton(event);">
Click this text (with one of your mouse-buttons)
<p>
0 Specifies the left mouse-button<br>
1 Specifies the middle mouse-button<br>
2 Specifies the right mouse-button
</p>
</div>
<script>
function WhichButton(event) {
alert("You pressed button: " + event.button)
}
</script>
9. Calling JS function from html onload()
–
<body onload="myFunction()">
<h2>Hello World!</h2>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
10. Calling JS function from html onerror()
–
<script>
function imgError() {
alert('The image could not be loaded.');
}
</script>
<img src="image.gif" onerror="imgError()">