Troubleshooting and solving problems that cannot modify parameter values ​​in JavaScript functions

In JavaScript development, you often encounter situations where external variables need to be modified inside functions. However, if the value of the variable is passed to the function rather than a reference, directly modifying the function parameters cannot change the value of the original variable. This article will provide detailed analysis and solutions to this common problem.

Problem analysis

The core of the problem lies in the way parameters are passed in JavaScript. For basic types (such as numbers, strings, boolean values), the function parameters pass a copy of the value. This means that the parameters are modified inside the function, and in fact, the copy value is modified, not the value of the original variable.

In the provided code, the editFun function receives these parameters, expN, expD, expA, expT, and their values ​​are copied into local variables inside the function when called. Therefore, modifying the values ​​of these local variables inside the editFun function will not affect the values ​​of the original expName, expDate, expAmount, expType input fields.

Solution: Pass element reference

To solve this problem, you need to pass the reference to the input fields (i.e. the DOM element itself) to the editFun function, not their values. In this way, the value attribute of the DOM element can be modified directly by reference within the editFun function, thereby updating the value of the input field.

The modified code is as follows:

 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; // Pass element reference const expD = expDate; // Pass element reference const expA = expAmount; // Pass element reference const expT = expType; // Pass element reference if (expT === "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);

  // Expressnse 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];
    });
  });
}

Key modifications:

• In expBtn.addEventListener, modify const expN = expName.value; to const expN = expName;. Similarly, similar modifications are made to expD, expA, and expT. This is passed to the editFun function, the DOM element itself, not its value.
• In the editFun function, use expT.value = siblings[1].innerText; to update the value of the input field. Similarly, similar modifications are made to expN, expD, and expA.

Things to note

• Make sure that what is passed to the function is a reference to the DOM element, not their values.
• Inside the function, use the .value attribute to access and modify the value of the input field.
• Pay attention to data type conversion. The values ​​obtained from the DOM element are usually strings and may need to be typed according to actual situations. For example, if expAmount should be a number, you can convert it to a floating point number using parseFloat(siblings[4].innerText.split(" Rs")[0]).
• siblings[4].innerText.split(" Rs")[0] in the code is used to remove the "Rs" character after the amount. In actual application, adjustments should be made according to actual conditions.

Summarize

By passing a reference to the DOM element, the value of the input field can be correctly modified inside the function. Understanding the way parameter passing in JavaScript is the key to solving this type of problem. When writing code, be sure to distinguish whether the passed value or reference, and choose the appropriate delivery method according to actual needs.

The above is the detailed content of Troubleshooting and solving problems that cannot modify parameter values ​​in JavaScript functions. For more information, please follow other related articles on the PHP Chinese website!