本文旨在解决在 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 Buttonfunction btnFun(delBtn) { Array.from(delBtn).forEach((e) => { e.addEventListener("click", (e) => { const a = e.currentTarget; a.parentElement.remove(); }); });}// Function for Edit Buttonfunction 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 代码。
以上就是JavaScript 函数中无法修改参数值？深入解析及解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1581624.html
微信扫一扫 
支付宝扫一扫 
