JavaScript参数无法修改？真相与解决方法

还在为JavaScript函数参数无法修改而烦恼吗？本文将深入解析这一常见问题，尤其是在处理DOM元素时。我们将通过具体代码示例，详细讲解如何正确传递DOM元素引用，并在函数内部修改元素的值，从而实现预期的编辑功能。避免直接对参数赋值，掌握值传递与引用传递的区别是关键。本文提供实用解决方案和注意事项，助你提升JavaScript编程技能，编写更健壮的代码。立即阅读，攻克JavaScript函数参数修改难题！

本文旨在解决在 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);
    });
  });
}

关键修改：

1. 传递 DOM 元素引用： 在 expBtn.addEventListener 中，将 expName、expDate、expAmount 和 expType 直接赋值给 expN、expD、expA 和 expT，而不是获取它们的值。这样，传递给 editFun 函数的就是 DOM 元素的引用。

2. 修改 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参数无法修改？真相与解决方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！