本文旨在解决在 JavaScript 函数中无法修改参数值的问题，尤其是在处理 DOM 元素时。通过分析问题代码，我们将探讨如何正确地将 DOM 元素引用传递给函数，并在函数内部修改这些元素的值，从而实现预期的编辑功能。本文提供详细的代码示例和解释，帮助开发者避免类似错误，提升 JavaScript 编程技能。
问题分析
在 JavaScript 中，当需要修改函数外部的变量时，需要特别注意参数的传递方式。对于基本数据类型（如数字、字符串），JavaScript 采用的是值传递，这意味着函数内部对参数的修改不会影响到函数外部的变量。但是，对于对象（包括 DOM 元素），传递的是引用。虽然可以修改对象内部的属性，但是如果直接对参数赋值，实际上是改变了参数的引用，而不会修改原始对象。
解决方案
要解决函数内部无法修改 DOM 元素值的问题，关键在于正确地传递 DOM 元素的引用，并在函数内部通过引用修改元素的 value 属性。以下是修改后的代码示例，并附带详细解释：
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];
console.log(expA , siblings[4].innerText);
});
});
}关键修改：
立即学习“Java免费学习笔记（深入）”；
传递 DOM 元素引用： 在 expBtn.addEventListener 中，将 expName、expDate、expAmount 和 expType 直接赋值给 expN、expD、expA 和 expT，而不是获取它们的值。这样，传递给 editFun 函数的就是 DOM 元素的引用。
修改 value 属性： 在 editFun 函数中，通过 expT.value = ...、expN.value = ... 等方式直接修改 DOM 元素的 value 属性。
代码解释
- document.getElementById(): 获取页面上对应 ID 的元素。
- addEventListener(): 为按钮添加点击事件监听器。
- const expN = expName;: 将 expName 变量（存储的是 ID 为 "exp-name" 的 DOM 元素）的引用赋值给 expN 变量。
- expT.value = siblings[1].innerText;: 获取兄弟元素的文本内容，并将其赋值给 expT 变量所引用的 DOM 元素的 value 属性。
注意事项
- 确保传递给函数的是 DOM 元素的引用，而不是它们的值。
- 在函数内部，通过引用直接修改 DOM 元素的 value 属性。
- 注意数据类型转换，例如将字符串转换为数字。
- 使用 console.log() 调试可以帮助理解代码的执行流程和变量的值。
总结
通过本文的讲解，你应该能够理解在 JavaScript 函数中修改 DOM 元素值的关键在于正确地传递 DOM 元素的引用，并在函数内部通过引用修改元素的 value 属性。 掌握这个技巧可以帮助你避免类似错误，编写更健壮的 JavaScript 代码。
