2026-02-225 min read

Create Function (Web Development)

Learn Create Function (Web Development) step by step with clear examples and exercises.

Why This Matters

Understanding how to create and use functions is a fundamental aspect of web development. Functions help organize and reuse code, making it more efficient, maintainable, and easier to read. By breaking down complex tasks into smaller pieces, we can reduce the risk of errors and improve the overall quality of our code.

Prerequisites

Before diving into creating functions, it's important to have a basic understanding of HTML and CSS. You should be comfortable with:

HTML elements and their structure
CSS selectors and properties
Basic HTML document organization (doctype, head, body)
Understanding the basics of JavaScript, such as variables, data types, and operators

Core Concept

In HTML, we can't directly write JavaScript functions within the HTML file. Instead, we use a combination of HTML and JavaScript to create functions. Here's how:

First, create an `` tag in your HTML document. This tag will contain our JavaScript code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Function Example</title>
</head>
<body>
<!-- Our JavaScript code goes here -->
<script>
// This is where we'll write our function
</script>
</body>
</html>

Inside the ` tag, we can define a function using the function keyword followed by the function name and parentheses. The code within curly braces {}` is executed when the function is called.

// Define a simple function that logs "Hello, World!" to the console
function greetWorld() {
console.log("Hello, World!");
}

To call or execute the function, use the function name followed by parentheses (). In this example, we'll call the greetWorld function when a button is clicked.

// Create a button element
const button = document.createElement("button");
button.textContent = "Greet World";

// Add an event listener to the button that calls greetWorld() when clicked
button.addEventListener("click", greetWorld);

// Append the button to the body of our HTML document
document.body.appendChild(button);

Now, when you click the "Greet World" button, the greetWorld function will be called, and "Hello, World!" will be logged to the console.

Worked Example

Let's create a simple calculator that adds two numbers.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
</head>
<body>
<!-- Create two input fields for the numbers to be added -->
<input type="number" id="num1">
<input type="number" id="num2">

<!-- Create a button that calls addNumbers() when clicked -->
<button onclick="addNumbers()">Add Numbers</button>

<!-- Create a paragraph element to display the result -->
<p id="result"></p>

<!-- Our JavaScript code goes here -->
<script>
// Define the addNumbers function that takes two numbers and returns their sum
function addNumbers() {
// Get the values of our input fields
const num1 = document.getElementById("num1").value;
const num2 = document.getElementById("num2").value;

// Convert the input values to numbers (in case they're strings)
const num1AsNumber = Number(num1);
const num2AsNumber = Number(num2);

// Calculate the sum and display it in our result paragraph
const result = num1AsNumber + num2AsNumber;
document.getElementById("result").textContent = result;
}
</script>
</body>
</html>

Common Mistakes

1. Forgetting to convert input values to numbers

When dealing with user input, it's essential to convert strings to numbers before performing calculations. If you forget to do this, JavaScript will treat the string as a concatenation of characters instead of a number, leading to incorrect results.

const num1 = document.getElementById("num1").value; // This is a string
const num2AsNumber = Number(num2); // Convert num2 to a number

2. Not returning a value from functions (when necessary)

Some functions are designed to return a value that can be used elsewhere in your code. If you forget to return a value, the function will return undefined, which might not be what you intended.

// Define a function called getRandomNumber that returns a random number between 1 and 10
function getRandomNumber() {
// Generate a random number between 1 and 10
const randomNumber = Math.floor(Math.random() * 10) + 1;

// Return the generated number
return randomNumber;
}

3. Incorrectly naming functions or variables

It's important to give functions and variables descriptive names that accurately reflect their purpose. This makes your code easier to understand and maintain. Avoid using vague or misleading names, as they can lead to confusion and errors.

Practice Questions

Write a function called greetUser that takes a user's name as a parameter and logs a personalized greeting to the console (e.g., "Hello, John!").

function greetUser(userName) {
console.log(`Hello, ${userName}!`);
}

Create a function called calculateArea that calculates the area of a rectangle given its length and width as parameters. The function should return the calculated area.

function calculateArea(length, width) {
const area = length * width;
return area;
}

Write a JavaScript function called sumArray that takes an array of numbers as a parameter and returns their sum.

function sumArray(numbers) {
let total = 0;

// Iterate through the numbers array and add each number to the total
for (let i = 0; i < numbers.length; i++) {
total += numbers[i];
}

// Return the calculated sum
return total;
}

Modify the simple calculator example to subtract two numbers instead of adding them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
</head>
<body>
<!-- Create two input fields for the numbers to be subtracted -->
<input type="number" id="num1">
<input type="number" id="num2">

<!-- Create a button that calls subtractNumbers() when clicked -->
<button onclick="subtractNumbers()">Subtract Numbers</button>

<!-- Create a paragraph element to display the result -->
<p id="result"></p>

<!-- Our JavaScript code goes here -->
<script>
// Define the subtractNumbers function that takes two numbers and returns their difference
function subtractNumbers() {
// Get the values of our input fields
const num1 = document.getElementById("num1").value;
const num2 = document.getElementById("num2").value;

// Convert the input values to numbers (in case they're strings)
const num1AsNumber = Number(num1);
const num2AsNumber = Number(num2);

// Calculate the difference and display it in our result paragraph
const result = num1AsNumber - num2AsNumber;
document.getElementById("result").textContent = result;
}
</script>
</body>
</html>

FAQ

How do I know when to use a function?

Use functions whenever you want to reuse code or organize your code for better readability and maintainability. If you find yourself writing the same piece of code multiple times, consider creating a function.

Can I define functions in HTML?

No, JavaScript functions must be defined within a `` tag in your HTML document or an external JavaScript file.

What happens if I don't return anything from my function?

If you don't explicitly return a value from your function, it will implicitly return undefined. This might not be the desired behavior, especially when working with functions that are supposed to return a specific value.

Can I pass multiple arguments to a function?

Yes, functions can take any number of arguments by listing them as separate parameters within parentheses. If you don't need to use all the arguments in your function, simply ignore the ones you don't need.