[SOLVED] Reuse function with different variables

Issue

I want to reuse my functions without having to copy-paste the same code. I want the user to input a value and click a button to call the function and calculate a result, then enter another value and click a different button to call the function and calculate a result.

This is my HTML code:

<!doctype html>
<html>
    <head>
        <title>Functions Test</title>
        <script src="script.js"></script>
    </head>
           
    <body>
        <h1>Calculation 1</h1>    
        <label>Enter depth:</label>
        <input id="dive1depth" type="number" placeholder="depth"><br>
      
        <br>
            
        <label>Enter time:</label>
        <input id="dive1time" type="number" placeholder="time"><br>
            
        <br>  
            
        <button onclick="CalcPG()">Calculate Pressure Group</button>
            
        <p>The Sum is: <output id="sum" size="40"></output></p>
        <p>The Product is: <output id="prod" size="40"></output></p>
            
            
        <h1>Calculation 2</h1>
            
        <label>Enter depth:</label>
        <input id="dive2depth" type="number" placeholder="depth"><br>
            
        <br>
            
        <label>Enter time:</label>
        <input id="dive2time" type="number" placeholder="time"><br>
            
        <br>  
            
        <button onclick="CalcPG()">Calculate Pressure Group</button>
            
        <p>The Sum is: <output id="sum2" size="40"></output></p>
        <p>The Product is: <output id="prod2" size="40"></output></p>
           
    </body>
</html>

This is the code in script.js:

function CalcPG(){
    
    var depth, time, pg;
    
    depth = Number(document.getElementById("dive1depth").value);
    time  = Number(document.getElementById("dive1time").value);
    
    sum = depth + time;
    
    prod = depth * time
    
    document.getElementById("sum").value = sum;
    document.getElementById("prod").value = prod;  
}

Solution

I am also a noob in javascript, so take this with a grain of salt.
Firstly i would change the calcPG function

change the function function CalcPG(x) to take a x argument ( x = 1 , x =2 and so on…)

depth = Number(document.getElementById(`dive${x}depth`).value);  
time  = Number(document.getElementById(`dive${x}time`).value);   

document.getElementById(`sum${x}`).value = sum;  
document.getElementById(`prod${x}`).value = prod;

adding “ and ${ } so that if you call CalcPG(1) you get for example "div1depth"

And making some changes on HTML

    <button onclick="CalcPG(1)">Calculate Pressure Group</button>
    <p>The Sum is: <output id="sum1" size="40"></output></p>
    <p>The Product is: <output id="prod1" size="40"></output></p>


    <button onclick="CalcPG(2)">Calculate Pressure Group</button>
    <p>The Sum is: <output id="sum2" size="40"></output></p>
    <p>The Product is: <output id="prod2" size="40"></output></p>

Answered By – aalbino221

Answer Checked By – Timothy Miller (BugsFixing Admin)

Issue

Solution

Leave a Reply Cancel reply