本文旨在解决JavaScript函数中无法修改参数值的问题，特别是当涉及到DOM元素时。通过分析问题代码，我们将深入探讨如何正确地将DOM元素引用传递给函数，并在函数内部修改这些元素的值，从而实现编辑表格数据的需求。文章将提供修改后的代码示例，并解释关键的修改点，帮助读者更好地理解和应用。
在JavaScript中，当需要修改函数外部的变量时，理解参数传递的方式至关重要。对于基本数据类型（如数字、字符串），JavaScript采用的是值传递，这意味着函数内部对参数的修改不会影响到原始变量。然而，对于对象（包括DOM元素），传递的是对象的引用。虽然不能直接修改引用本身，但可以修改引用指向的对象的内容。
问题分析
原代码的问题在于，editFun 函数接收的是 expN、expD、expA 和 expT 的值，而不是DOM元素的引用。因此，在 editFun 内部修改这些变量的值，实际上是在修改局部变量，而不会影响到HTML input元素。
立即学习“Java免费学习笔记（深入）”；
解决方案
要解决这个问题，需要将DOM元素的引用传递给 editFun 函数。这样，在 editFun 内部，就可以通过引用来直接修改DOM元素的值。
修改后的代码
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; // 传递DOM元素的引用
const expD = expDate; // 传递DOM元素的引用
const expA = expAmount; // 传递DOM元素的引用
const expT = expType; // 传递DOM元素的引用
if (expT.value === "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];
});
});
}关键修改点
- 传递DOM元素引用: 在 expBtn.addEventListener 中，将 expName、expDate、expAmount 和 expType 直接赋值给 expN、expD、expA 和 expT，传递的是DOM元素的引用，而不是它们的值。
- 访问DOM元素的值: 在 editFun 函数中，通过 .value 属性来修改DOM元素的值。例如，expT.value = siblings[1].innerText;。
- 修改expT.value的判断 在 expBtn.addEventListener 中，判断条件要改为expT.value === "choose-type"，判断value值
注意事项
- 确保获取DOM元素时，DOM已经加载完成。可以将JavaScript代码放在</body>标签之前，或者使用DOMContentLoaded事件来确保DOM加载完成后再执行JavaScript代码。
- 在修改DOM元素的值之前，最好进行类型检查和数据验证，以避免出现错误。
总结
理解JavaScript的参数传递机制是解决此类问题的关键。对于DOM元素，传递的是引用，因此可以通过引用来修改DOM元素的值。通过将DOM元素的引用传递给函数，并在函数内部使用.value属性来修改元素的值，可以实现对表单数据的编辑功能。希望本文能够帮助读者更好地理解和应用JavaScript。
