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

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; 
})

CodePudding user response：

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>

CodePudding user response：

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>