How do you link local variables to other functions without having to use global variables?

Question

How do I link up the 3 functions below so I can have mathFormula output an answer?

HTML text:

<div id = "rowContainer"></div>

JavaScript text:

function mathFormula(x, y) {
    return x * y;
}

const mainDiv = document.getElementById("rowContainer"); 

function newRow() {
    const input1 = document.createElement("input");
    mainDiv.appendChild(input1);
    const input2 = document.createElement("input");
    mainDiv.appendChild(input2);
    const result = document.createElement("div");
    mainDiv.appendChild(result);
}

mainDiv('keyup', function() {
    const a = input1.value; 
    const b = input2.value; 
    const sum = mathFormula(a,b); 
    result.textContent = sum; 
})

Answer 1

Functions can see variables in their containing scope, so the keyup listener, if defined inside the newRow function , captures the context of input elements.

The other thing to notice is that the listener is ambiguous unless attached to a specific row (capturing in scope that row's inputs). The snippet below adds an extra div to hold the row, and attaches the listener at the row-div level.

 const mainDiv = document.getElementById('maindiv'); function mathFormula(x, y) { return x * y; } function addRow() { const rowDiv = document.createElement("div"); mainDiv.appendChild(rowDiv); const input1 = document.createElement("input"); rowDiv.appendChild(input1); const input2 = document.createElement("input"); rowDiv.appendChild(input2); const result = document.createElement("div"); rowDiv.appendChild(result); rowDiv.addEventListener("keyup", event => { const a = input1.value; const b = input2.value; result.textContent = mathFormula(a, b); }) } addRow() addRow()

 <div id="maindiv"> </div>

Answer 2

We only need 2 functions in this case. newRow() & mathFormula . creating 3 inputs instead of one being a div. appending all inputs inside our rowContainer .all at once, no need to do them separately. then i am listening to a click on my button which i created inside html. so,when we click the button.inside there i am calling our mathFormula function & passing the input1 & input2.

let multiply=mathFormula(input1,input2) which sends the these two inputs to mathFormula as object still.those inputs are then assigned to x,y. then i am saying x = x.value & y =y.value then returns a single value of x*y which gets stored in the multiply variable. because we said.

let multiply=mathFormula(input1,input2) putting that value inside result input.

i hope it helps you.you can ask if you have any doubts

 const mainDiv = document.getElementById("rowContainer"); const btn = document.getElementById("btn"); function mathFormula(x, y) { x=x.value; y=y.value return x * y; } newRow(); /*-----Calling the newRow() rightAway*/ function newRow() { const input1 = document.createElement("input"); const input2 = document.createElement("input"); const result = document.createElement("input"); mainDiv.append(input1, input2, result); btn.addEventListener("click",()=>{ let multiply=mathFormula(input1,input2) result.value=multiply; }) }

 <div id="rowContainer"></div> <button id="btn">Click</button>