JavaScript 函数中无法修改参数值？深入解析及解决方案-html教程-PHP中文网

JavaScript 函数中无法修改参数值？深入解析及解决方案

霞舞

发布： 2025-10-06 11:24:16

原创

377人浏览过

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);
    });
  });
}

登录后复制

关键修改：

立即学习“Java免费学习笔记（深入）”；

图改改

在线修改图片文字

455

查看详情

传递 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 属性。