Building a Multiplying Calculator: JavaScript Functions Step by Step (2026 Edition)

Introduction: Why Functions Matter in JavaScript

Functions are the building blocks of almost everything we do in JavaScript. At their core, functions are collections of statements that allow us to break down more significant problems into smaller ones and enable us to reuse code. In this exercise, we'll build a Multiplying Calculator that takes two values, multiplies them, and updates the DOM with the result. This tutorial is designed for students taking CPSC1520 or anyone learning JavaScript functions for the first time.

Think of functions like the AI agents in a modern app: each agent has a specific job, receives inputs, and returns outputs. By combining small, focused functions, you can create powerful applications. Just as TikTok's recommendation algorithm uses many small models working together, your calculator will use small functions to achieve its goal.

Step 1: Setting Up Your JavaScript File

First, link your JavaScript file in your HTML. Add a <script> tag just before the closing </body> tag. Then, print a console.log that prints out "javascript calculator linked". This ensures your file is connected properly.

console.log("javascript calculator linked");

This simple step verifies that your script runs. In the real world, developers use similar checks to confirm that third-party libraries or AI SDKs are loaded correctly.

Step 2: Create the getElementValue Function

Create a function named getElementValue that takes one parameter named selector. The function should return the innerText of the element selected using the selector parameter.

function getElementValue(selector) {
  return document.querySelector(selector).innerText;
}

This function is reusable: you can call it with any CSS selector to get the text content of an element. It's like a voice assistant that fetches information from a specific source. In a finance app, you might use a similar function to grab stock prices from a DOM element.

Step 3: Create the multiply Function

Next, create a function named multiply that takes two parameters: firstValue and secondValue. The function returns both numbers multiplied together.

function multiply(firstValue, secondValue) {
  return firstValue * secondValue;
}

Note: When you call this function, you'll need to pass numbers, not strings. This is a common pitfall for beginners. Think of it like esports scoring: you need numeric values to calculate total points, not text descriptions.

Step 4: Create the updateResult Function

Now, create a function named updateResult that doesn't take any parameters. Inside it, use getElementValue to get the values from the DOM, convert them to numbers using parseInt, call multiply, and update the result element.

function updateResult() {
  const firstValue = parseInt(getElementValue("#first-number"));
  const secondValue = parseInt(getElementValue("#second-number"));
  const result = multiply(firstValue, secondValue);
  document.querySelector("#result").innerText = result;
}

updateResult();

This function ties everything together. It's like a smart home automation routine: gather sensor data (input values), process it (multiply), and update the display. In a school project dashboard, you might use a similar pattern to calculate averages or totals.

Step 5: Testing and Debugging

Test your calculator by entering different numbers. If something goes wrong, use console.log to inspect values. For example:

console.log("First value:", firstValue, "Second value:", secondValue, "Result:", result);

Debugging is a critical skill. Even AI chatbots need debugging to improve their responses. By logging intermediate values, you can trace issues just like a data scientist debugging a machine learning pipeline.

Step 6: Pushing to GitHub

Once your code works, push it to GitHub. Accept the assignment link, clone the repository, make your changes, add, commit, and push. The typical commands are:

git add .
git commit -m "Completed multiplying calculator"
git push

Version control is essential in modern development. Whether you're working on a team project or an open-source AI library, GitHub helps you collaborate and track changes.

Common Mistakes to Avoid

• Forgetting to convert strings to numbers: Always use parseInt or parseFloat before arithmetic.
• Incorrect selector strings: Make sure your selector matches the HTML element's ID or class.
• Not calling the updateResult function: The result won't update unless you call it.
• Misnaming functions or parameters: JavaScript is case-sensitive; getElementValue is not the same as getelementvalue.

Real-World Applications

This simple calculator demonstrates principles used in e-commerce price calculators, sports score aggregators, and AI model inference. For example, a fantasy football app might multiply a player's points by a multiplier to calculate weekly scores. By mastering functions, you unlock the ability to build complex, interactive web applications.

Conclusion

You've built a Multiplying Calculator using JavaScript functions. This exercise teaches you how to break down problems, reuse code, and interact with the DOM. These skills are foundational for web development, data visualization, and even AI-powered apps. Keep practicing, and soon you'll be building your own interactive tools and dynamic dashboards.