JavaScript函數內無法修改參數值的問題排查與解決

在JavaScript開發中，經常會遇到需要在函數內部修改外部變量的情況。然而，如果傳遞給函數的是變量的值而非引用，直接修改函數參數並不能改變原始變量的值。本文將針對這一常見問題，提供詳細的分析和解決方案。

問題分析

問題的核心在於JavaScript中參數傳遞的方式。對於基本類型（如數字、字符串、布爾值），函數參數傳遞的是值的拷貝。這意味著在函數內部修改參數，實際上修改的是拷貝的值，而不是原始變量的值。

在提供的代碼中，editFun 函數接收了expN, expD, expA, expT 這些參數，它們的值在調用時被複製到函數內部的局部變量中。因此，在editFun 函數內部修改這些局部變量的值，並不會影響到原始的expName, expDate, expAmount, expType 輸入字段的值。

解決方案：傳遞元素引用

要解決這個問題，需要將輸入字段的引用（即DOM元素本身）傳遞給editFun 函數，而不是它們的值。這樣，在editFun 函數內部就可以直接通過引用來修改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; // 傳遞元素引用const expD = expDate; // 傳遞元素引用const expA = expAmount; // 傳遞元素引用const expT = expType; // 傳遞元素引用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);

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

關鍵修改:

• 在expBtn.addEventListener 中，將const expN = expName.value; 修改為const expN = expName;。 同樣地，對expD, expA, expT 也進行類似修改。 這樣傳遞給editFun 函數的是DOM元素本身，而不是它的值。
• 在editFun 函數中，使用expT.value = siblings[1].innerText; 來更新輸入字段的值。 同樣地，對expN, expD, expA 也進行類似修改。

注意事項

• 確保傳遞給函數的是DOM元素的引用，而不是它們的值。
• 在函數內部，使用.value 屬性來訪問和修改輸入字段的值。
• 注意數據類型轉換。 從DOM元素獲取的值通常是字符串，可能需要根據實際情況進行類型轉換。 例如，如果expAmount 應該是一個數字，可以使用parseFloat(siblings[4].innerText.split(" Rs")[0]) 將其轉換為浮點數。
• 代碼中的siblings[4].innerText.split(" Rs")[0] 用於移除金額後面的" Rs" 字符。 在實際應用中，應該根據實際情況進行調整。

總結

通過傳遞DOM元素的引用，可以在函數內部正確地修改輸入字段的值。理解JavaScript中參數傳遞的方式是解決這類問題的關鍵。在編寫代碼時，務必注意區分傳遞的是值還是引用，並根據實際需求選擇合適的傳遞方式。

以上是JavaScript函數內無法修改參數值的問題排查與解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！