如何在不使用全局变量的情况下将局部变量链接到其他函数

Question

如何链接下面的3个函数，以便让mathFormula输出答案？

HTML文本：

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

JavaScript文本：

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

函数可以在其包含范围中查看变量，因此keyup监听器(如果在newRow函数中定义(捕获输入元素的上下文。

需要注意的另一件事是，侦听器是不明确的，除非附加到特定的行(在范围内捕获该行的输入(。下面的代码段添加了一个额外的div来容纳行，并在行div级别附加监听器。

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

在这种情况下，我们只需要2个函数。CCD_ 2&mathFormula。创建3个CCD_ 4而不是一个div。将所有输入都附加到我们的rowContainer中。一次完成所有输入，无需单独执行。然后我听到我在html中创建的按钮被点击。所以，当我们点击侧面的按钮时，我正在调用我们的mathFormula函数&将输入1&输入2.

let multiply=mathFormula(input1,input2)将这两个输入作为对象静态发送到mathFormula。然后将这些输入分配给x，y。那么我说CCD_ 8&CCD_ 9然后返回存储在CCD_ 11变量中的CCD_。因为我们说过。

let multiply=mathFormula(input1,input2)将该值放入结果输入中。

我希望它能帮助你。如果你有任何疑问，可以问

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>