'How to pipe the output of a function as the input of another function in javascript?

I guess this is a simple one but I'm unable to find the correct syntax or maybe the right method. Please help!

Objective: A function which returns the sum of of three numbers x, y and z. Using the sum as an input for another function which returns the average.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Java Script</title>

  <script>
    // Function for Sum
    function addition() {
      let numOne, numTwo, numThree, sum;
      numOne = parseInt(document.getElementById("firstNumber").value);
      numTwo = parseInt(document.getElementById("secondNumber").value);
      numThree = parseInt(document.getElementById("thirdNumber").value);
      sum = numOne + numTwo + numThree;
      document.getElementById("sum").innerHTML = sum;
    }

    // Function for average

    function average() {
      let numOne, numTwo, numThree, sum, avg;
      numOne = parseInt(document.getElementById("firstNumber").value);
      numTwo = parseInt(document.getElementById("secondNumber").value);
      numThree = parseInt(document.getElementById("thirdNumber").value);
      sum = numOne + numTwo + numThree;
      avg = sum / 3;
      document.getElementById("average").innerHTML = avg;
    }
  </script>

</head>

<body>

  <h1>Code</h1>

  <!-- Input  -->

  <label for="firstNumber">First Number: </label>
  <input type="text" id="firstNumber">

  <br><br>

  <label for="secondNumber">Second Number: </label>
  <input type="text" id="secondNumber">

  <br><br>

  <label for="thirdNumber">Third Number: </label>
  <input type="text" id="thirdNumber">

  <br><br>

  <!-- Output -->

  <label for="sum">Sum: </label>
  <p id="sum">Sum here! </p>

  <label for="average">Average: </label>
  <p id="average">Average here! </p>

  <!-- Buttons -->

  <input type="button" value="Sum" onclick="addition()">

  <input type="button" value="average" onclick="average()">

  <br><br><br>

</body>

</html>

The second function (average) could have used the output of the first function (addition) as the value for the sum (variable) instead of writing all the code over again!

javascript function

Solution 1:^[1]

You could add a return statement in the addition() function to use as an input for the average() function

function addition()
    {
        let numOne, numTwo, numThree, sum;
        numOne = parseInt(document.getElementById("firstNumber").value);
        numTwo = parseInt(document.getElementById("secondNumber").value);
        numThree = parseInt(document.getElementById("thirdNumber").value);
        sum = numOne + numTwo + numThree;
        document.getElementById("sum").innerHTML = sum;
        return sum; //this will be used as input for average
    }

// Function for average

    function average()
    {
        let sum = addition()
        avg = sum/3;
        document.getElementById("average").innerHTML = avg;
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	TAVentura

'How to pipe the output of a function as the input of another function in javascript?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]