Dépannage et résolution de problèmes qui ne peuvent pas modifier les valeurs des paramètres dans les fonctions JavaScript

Dans le développement de JavaScript, vous rencontrez souvent des situations où les variables externes doivent être modifiées à l'intérieur des fonctions. Cependant, si la valeur de la variable est transmise à la fonction plutôt qu'à une référence, la modification directe des paramètres de fonction ne peut pas modifier la valeur de la variable d'origine. Cet article fournira une analyse détaillée et des solutions à ce problème commun.

Analyse des problèmes

Le cœur du problème réside dans la façon dont les paramètres sont passés en JavaScript. Pour les types de base (tels que les nombres, les chaînes, les valeurs booléennes), les paramètres de fonction passent une copie de la valeur. Cela signifie que les paramètres sont modifiés à l'intérieur de la fonction, et en fait, la valeur de copie est modifiée, et non la valeur de la variable d'origine.

Dans le code fourni, la fonction EditFun reçoit ces paramètres, expn, expd, expa, expt, et leurs valeurs sont copiées dans des variables locales à l'intérieur de la fonction lorsqu'elle est appelée. Par conséquent, la modification des valeurs de ces variables locales à l'intérieur de la fonction EditFun n'affectera pas les valeurs du nom d'origine, expdate, expamount, champs d'entrée exptype.

Solution: référence de l'élément passant

Pour résoudre ce problème, vous devez transmettre la référence aux champs d'entrée (c'est-à-dire l'élément DOM lui-même) à la fonction EditFun, pas à leurs valeurs. De cette manière, l'attribut de valeur de l'élément DOM peut être modifié directement par référence dans la fonction EditFun, mettant ainsi à jour la valeur du champ de saisie.

Le code modifié est le suivant:

 const Expamount = document.getElementById ("exp-amount");
const expname = document.getElementById ("exp-name");
const expdate = document.getElementById ("exp-date");
const expbtn = document.getElementById ("ex-btn");
const exptype = document.getElementById ("exp-type");
const Table = document.getElementById ("table");
const TableChild = document.getElementById ("Table"). ChildNodes;

expbtn.addeventListener ("cliquez", () => {
  const expn = expName; // Référence de l'élément CONP expd = expdate; // Pass Element Reference const Expa = Expamount; // Pass Element Reference const expt = exptype; // Passe la référence de l'élément if (expt === "Choose-Type") {
    alert ("Veuillez choisir le type de dépenses!");
    retour;
  }

  const Tr = document.CreateElement ("tr");

  // série non
  const td1 = document.createElement ("td");
  const td1text = document.CreateTextNode (TableChild.Length - 1);
  td1.appendChild (td1text);
  Tr.ApendChild (TD1);

  // Type expressnse
  const td2 = document.createElement ("td");
  const td2text = document.CreateTextNode (expt.value);
  TD2.APPEndChild (TD2Text);
  td2.classList.add ("expt-data");
  Tr.ApendChild (TD2);

  // Nom des dépenses
  const td3 = document.createElement ("td");
  const td3text = document.CreateTextNode (expn.value);
  TD3.APPEndChild (TD3Text);
  td3.classList.add ("expn-data");
  Tr.ApendChild (TD3);

  // Date de dépense
  const td4 = document.createElement ("td");
  const td4text = document.CreateTextNode (expd.value);
  TD4.APPEndChild (TD4Text);
  td4.classList.add ("expd-data");
  Tr.ApendChild (TD4);

  // Montant de dépense
  const td5 = document.createElement ("td");
  const td5text = document.createTextNode (expa.value "rs");
  TD5.APPEndChild (TD5Text);
  td5.classList.add ("expa-data");
  Tr.ApendChild (TD5);

  // Supprimer BTN
  const td6 = document.createElement ("td");
  const td6text = document.CreateTextNode ("Delete");
  TD6.APPEND (TD6Text);
  td6.classList.add ("del-btn");
  Tr.ApendChild (TD6);

  const td7 = document.createElement ("td");
  const td7text = document.createTextNode ("édition");
  TD7.APPEND (TD7Text);
  td7.classList.add ("edit-btn");
  Tr.ApendChild (TD7);

  table.APPEndChild (tr);

  const editbtn = document.getElementsByClassName ("edit-btn");
  EditFun (EditBtn, expn, expd, expa, expt);

  const delbtn = document.getElementsByClassName ("del-btn");
  btnfun (delbtn);
});

// fonction pour le bouton de suppression
fonction btnfun (delbtn) {
  Array.from (delbtn) .ForEach ((e) => {
    e.AddeventListener ("cliquez", (e) => {
      const a = e.currentTarget;
      a.parerentelement.remove ();
    });
  });
}

// Fonction pour le bouton d'édition
fonction editfun (editbtn, expn, expd, expa, expt) {
  Array.from (editbtn) .ForEach ((e) => {
    e.AddeventListener ("cliquez", (e) => {
      const siples = e.currentTarget.pare-ParentElement.ChildNodes;

      expt.value = frères et sœurs [1] .InnerText;
      expn.value = frères et sœurs [2] .InnerText;
      expd.value = frères et sœurs [3] .InnerText;
      expa.value = silets [4] .InnerText.split ("RS") [0];
    });
  });
}

Modifications clés:

• Dans expbtn.addeventListener, modifier const expn = expName.value; à const expn = expName;. De même, des modifications similaires sont apportées à l'expd, à l'exa et à l'expt. Ceci est transmis à la fonction EditFun, l'élément DOM lui-même, et non sa valeur.
• Dans la fonction EditFun, utilisez expt.value = frères et sœurs [1] .InnerText; Pour mettre à jour la valeur du champ de saisie. De même, des modifications similaires sont apportées à Expn, Expd et Expa.

Choses à noter

• Assurez-vous que ce qui est passé à la fonction est une référence à l'élément DOM, pas à leurs valeurs.
• À l'intérieur de la fonction, utilisez l'attribut .value pour accéder et modifier la valeur du champ de saisie.
• Faites attention à la conversion du type de données. Les valeurs obtenues à partir de l'élément DOM sont généralement des chaînes et peuvent avoir besoin d'être dactylographiées en fonction des situations réelles. Par exemple, si Expamount doit être un nombre, vous pouvez le convertir en un numéro de point flottant en utilisant parsefloat (frères et sœurs [4] .InnerText.split ("RS") [0]).
• frères et sœurs [4] .InnerText.split ("RS") [0] dans le code est utilisé pour supprimer le caractère "RS" après le montant. Dans l'application réelle, des ajustements doivent être effectués en fonction des conditions réelles.

Résumer

En passant une référence à l'élément DOM, la valeur du champ de saisie peut être correctement modifiée à l'intérieur de la fonction. Comprendre la façon dont le paramètre passant dans JavaScript est la clé pour résoudre ce type de problème. Lorsque vous écrivez du code, assurez-vous de distinguer si la valeur ou la référence passée et choisissez la méthode de livraison appropriée en fonction des besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!