在JavaScript开发中，经常会遇到需要在函数内部修改外部变量的情况。然而，如果传递给函数的是变量的值而非引用，直接修改函数参数并不能改变原始变量的值。本文将针对这一常见问题，提供详细的分析和解决方案。
问题分析
问题的核心在于JavaScript中参数传递的方式。对于基本类型（如数字、字符串、布尔值），函数参数传递的是值的拷贝。这意味着在函数内部修改参数，实际上修改的是拷贝的值，而不是原始变量的值。
在提供的代码中，editFun 函数接收了 expN, expD, expA, expT 这些参数，它们的值在调用时被复制到函数内部的局部变量中。因此，在 editFun 函数内部修改这些局部变量的值，并不会影响到原始的 expName, expDate, expAmount, expType 输入字段的值。
解决方案：传递元素引用
要解决这个问题，需要将输入字段的引用（即DOM元素本身）传递给 editFun 函数，而不是它们的值。这样，在 editFun 函数内部就可以直接通过引用来修改DOM元素的 value 属性，从而更新输入字段的值。
立即学习“Java免费学习笔记（深入）”；
住哪API酒店+租车源码包
下载
数据本地化解决接口缓存数据无限增加，读取慢的问题，速度极大提升更注重SEO优化优化了系统的SEO，提升网站在搜索引擎的排名，增加网站爆光率搜索框本地化不用远程读取、IFRAME调用，更加容易应用及修改增加天气预报功能页面增加了天气预报功能，丰富内容增加点评和问答页面增加了点评和问答相关页面，增强网站粘性电子地图优化优化了电子地图的加载速度与地图功能酒店列表增加房型读取酒店列表页可以直接展示房型，增
修改后的代码如下：
const expAmount = document.getElementById("exp-amount");
const expName = document.getElementById("exp-name");
const expDate = document.getElementById("exp-date");
const expBtn = document.getElementById("exp-btn");
const expType = document.getElementById("exp-type");
const table = document.getElementById("table");
const tableChild = document.getElementById("table").childNodes;
expBtn.addEventListener("click", () => {
const expN = expName; // 传递元素引用
const expD = expDate; // 传递元素引用
const expA = expAmount; // 传递元素引用
const expT = expType; // 传递元素引用
if (expT === "choose-type") {
alert("Please choose the expense type !");
return;
}
const tr = document.createElement("tr");
// Serial No
const td1 = document.createElement("td");
const td1Text = document.createTextNode(tableChild.length - 1);
td1.appendChild(td1Text);
tr.appendChild(td1);
// Expresnse Type
const td2 = document.createElement("td");
const td2Text = document.createTextNode(expT.value);
td2.appendChild(td2Text);
td2.classList.add("expT-data");
tr.appendChild(td2);
// Expense Name
const td3 = document.createElement("td");
const td3Text = document.createTextNode(expN.value);
td3.appendChild(td3Text);
td3.classList.add("expN-data");
tr.appendChild(td3);
// Expense Date
const td4 = document.createElement("td");
const td4Text = document.createTextNode(expD.value);
td4.appendChild(td4Text);
td4.classList.add("expD-data");
tr.appendChild(td4);
// Expense Amount
const td5 = document.createElement("td");
const td5Text = document.createTextNode(expA.value + " Rs");
td5.appendChild(td5Text);
td5.classList.add("expA-data");
tr.appendChild(td5);
// Delete Btn
const td6 = document.createElement("td");
const td6Text = document.createTextNode("Delete");
td6.append(td6Text);
td6.classList.add("del-btn");
tr.appendChild(td6);
const td7 = document.createElement("td");
const td7Text = document.createTextNode("Edit");
td7.append(td7Text);
td7.classList.add("edit-btn");
tr.appendChild(td7);
table.appendChild(tr);
const editBtn = document.getElementsByClassName("edit-btn");
editFun(editBtn, expN, expD, expA, expT);
const delBtn = document.getElementsByClassName("del-btn");
btnFun(delBtn);
});
// Function for Delete Button
function btnFun(delBtn) {
Array.from(delBtn).forEach((e) => {
e.addEventListener("click", (e) => {
const a = e.currentTarget;
a.parentElement.remove();
});
});
}
// Function for Edit Button
function editFun(editBtn, expN, expD, expA, expT) {
Array.from(editBtn).forEach((e) => {
e.addEventListener("click", (e) => {
const siblings = e.currentTarget.parentElement.childNodes;
expT.value = siblings[1].innerText;
expN.value = siblings[2].innerText;
expD.value = siblings[3].innerText;
expA.value = siblings[4].innerText.split(" Rs")[0];
});
});
}关键修改:
- 在 expBtn.addEventListener 中，将 const expN = expName.value; 修改为 const expN = expName;。 同样地，对 expD, expA, expT 也进行类似修改。 这样传递给 editFun 函数的是DOM元素本身，而不是它的值。
- 在 editFun 函数中，使用 expT.value = siblings[1].innerText; 来更新输入字段的值。 同样地，对 expN, expD, expA 也进行类似修改。
注意事项
- 确保传递给函数的是DOM元素的引用，而不是它们的值。
- 在函数内部，使用 .value 属性来访问和修改输入字段的值。
- 注意数据类型转换。 从DOM元素获取的值通常是字符串，可能需要根据实际情况进行类型转换。 例如，如果 expAmount 应该是一个数字，可以使用 parseFloat(siblings[4].innerText.split(" Rs")[0]) 将其转换为浮点数。
- 代码中的 siblings[4].innerText.split(" Rs")[0] 用于移除金额后面的 " Rs" 字符。 在实际应用中，应该根据实际情况进行调整。
总结
通过传递DOM元素的引用，可以在函数内部正确地修改输入字段的值。理解JavaScript中参数传递的方式是解决这类问题的关键。在编写代码时，务必注意区分传递的是值还是引用，并根据实际需求选择合适的传递方式。
