How to Call a JavaScript Function in HTML
By FoxLearn 12/18/2024 4:16:02 AM 29
To call a JavaScript function in an HTML document, you can follow these steps.
To call a JavaScript function in HTML, define it within <script> tags in the head or body, and call it when a user interacts with a page element.
HTML Call Javascript function
In the example below, we define a function in the head section to change a div's color from orange to green. A button with an onclick event calls the function when clicked.
How to define a JavaScript function and call it when a button is clicked in HTML.
For example, Using Inline Event Handler
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* CSS Styles */
div {
width: 100px;
height: 100px;
background-color: orange;
margin: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<!-- HTML content -->
<button id="btn">Change color</button>
<div id="my-div"></div>
<script>
// JavaScript functionality
var button = document.getElementById("btn");
button.addEventListener("click", changeColor);
function changeColor() {
document.getElementById("my-div").style.backgroundColor = "green";
}
</script>
</body>
</html>The CSS styles the div with a size of 100px by 100px, an initial background color of orange, and rounded corners.
The JavaScript listens for a click on the button with the id="btn". When clicked, it triggers the changeColor() function that changes the background color of the div (with id="my-div") to green.
If you want to keep your JavaScript code separate from the HTML file, you can place it in an external .js file.
For example, Using External JavaScript File
In the HTML file, the <script src="script.js"></script> tag links the external JavaScript file to the HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Call JavaScript Function</title>
<script src="script.js"></script> <!-- Link to external JS file -->
</head>
<body>
<button onclick="myFunction()">Click Me</button>
</body>
</html>The JavaScript file script.js contains the myFunction() function.
function myFunction() {
alert("Hello, this is a JavaScript function!");
}If you want to call a JavaScript function when the page is loaded, you can use the window.onload event or call the function directly within the <script> tag.
For example, Calling a JavaScript Function When the Page Loads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Call JavaScript Function on Page Load</title>
<script>
window.onload = function() {
myFunction(); // Call the function when the page loads
};
function myFunction() {
alert("Page Loaded and JavaScript Function Called!");
}
</script>
</head>
<body>
<h1>Javascript</h1>
</body>
</html>
In this case, the myFunction() is called automatically when the page finishes loading.
These are the basic methods for calling JavaScript functions in HTML. You can trigger the function using events like button clicks, page load, or other events in the browser.
Categories
Popular Posts
11 Things You Didn't Know About Cloudflare
12/19/2024