Article Categories

Selected Reading

JavaScript Sum function on the click of a button

Javascript Web Development Object Oriented Programming

In JavaScript, you can create a sum function that executes when a button is clicked. This involves defining a function and attaching it to the button's onclick event.

Basic Button Setup

Here's how to create a button that calls a function with a parameter:

<button type="button" onclick="addTheValue(10)">Sum</button>

When clicked, this button calls the addTheValue() function with the value 10 as a parameter.

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sum Function Example</title>
</head>
<body>
    <h1>Adding 10 each time whenever you click the Sum Button</h1>
    
    <p>Current Value: <b id="currentValue">10</b></p>
    <button type="button" onclick="addTheValue(10)">Sum</button>
    
    <script>
        function addTheValue(valueToAdd) {
            var currentElement = document.getElementById("currentValue");
            var currentNumber = parseInt(currentElement.innerHTML);
            var newValue = currentNumber + parseInt(valueToAdd);
            currentElement.innerHTML = newValue;
        }
    </script>
</body>
</html>

How It Works

The function follows these steps:

Gets the element with ID currentValue using getElementById()
Extracts the current number using parseInt() to convert string to integer
Adds the parameter value to the current number
Updates the display with the new sum

Multiple Sum Options

You can create multiple buttons with different values:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Sum Buttons</title>
</head>
<body>
    <h1>Click buttons to add different values</h1>
    
    <p>Current Total: <b id="total">0</b></p>
    
    <button onclick="addValue(5)">Add 5</button>
    <button onclick="addValue(10)">Add 10</button>
    <button onclick="addValue(25)">Add 25</button>
    <button onclick="resetValue()">Reset</button>
    
    <script>
        function addValue(amount) {
            var totalElement = document.getElementById("total");
            var currentTotal = parseInt(totalElement.innerHTML);
            totalElement.innerHTML = currentTotal + amount;
        }
        
        function resetValue() {
            document.getElementById("total").innerHTML = "0";
        }
    </script>
</body>
</html>

Key Points

Use parseInt() to convert string values to numbers for arithmetic operations
The onclick attribute directly calls JavaScript functions
Functions can accept parameters to make them reusable with different values
Always update the DOM element's innerHTML to reflect changes visually

Conclusion

Creating sum functions with button clicks involves combining HTML buttons with JavaScript functions. Use getElementById() to access elements and parseInt() to handle numeric operations safely.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next