11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour! j'aimerais écrire une fonction en javascript mais lors de l'appel de ma fonction, la variable passée en argument n'existe pas encore ... Je me ferais mieux comprendre avec le code directement (:


for (let n of searchResultName) {
    n.addEventListener('click', function () {
        resultsContainer.innerHTML = "";
        runSearchedTargetClass(startIconNum.innerHTML === this.getAttribute('data-id'))
    });
}


function runSearchedTargetClass(condition) {
    for (let startIconNum of startIconsNum) if (condition) {
        enableSelectedIcon(startIconNum);
        break;
    }
}


C'est ce que j'aimerais faire, mais de façon assez logique, ma console me retourne :


Uncaught ReferenceError: startIconNum is not defined


Bonne journée à tous !
Modifié par vzytoi (10 Mar 2021 - 11:39)
connecté
Modérateur
Et l'eau,

1. je te conseille de déclarer tes fonctions en littéral. Ça a de nombreux avantages (transfert de références). Déclarer une fonction comme tu l'as fait, c'est plutôt des pseudos objets prototypes ES5.
2. Évite de jouer sur la portée des variables au sein d'une déclaration de fonction (d'où ton erreur surement). Ça va te jouer des tours.
3. Regarde mieux le code de ta déclaration de fonction runSearchedTargetClass. Ce n'est pas valide. Il y a une erreur de syntaxe.
Modifié par niuxe (10 Mar 2021 - 11:55)
Merci beaucoup de te réponse!
j'ai regardé sur internet ce qu'était un "objet littéral" ( je ne connais pas vraiment les termes), c'est ce que tu entends? :

     function runSearchedTargetClass(condition) {
          for (let startIconNum of startIconsNum) if (condition) {
               return enableSelectedIcon(startIconNum);
          }
     }

Pour ce qui est de l'erreur de syntaxe, je ne l'ai pas du tout trouvée ...
Modifié par vzytoi (10 Mar 2021 - 12:07)
connecté
Modérateur
vzytoi a écrit :
Merci beaucoup de te réponse!
j'ai regardé sur internet ce qu'était un "objet littéral" ( je ne connais pas vraiment les termes), c'est ce que tu entends? :

     function runSearchedTargetClass(condition) {
          for (let startIconNum of startIconsNum) if (condition) {
               return enableSelectedIcon(startIconNum);
          }
     }



Déclaration fonction et non objet en litéral :

var maFonction = function(args){
    //.....
}

Tu attribues à une variable, une lambda (fonction anonyme).

vzytoi a écrit :
Pour ce qui est de l'erreur de syntaxe, je ne l'ai pas du tout trouvée ...


var runSearchedTargetClass = function(condition, startIconsNum) {
  for (let startIconNum of startIconsNum){ 
    if (condition) {
        return enableSelectedIcon(startIconNum);
    }
  }
};

Oups, en effet, je n’avais pas vu ton manque d'accolades pour "for". Ce qui veut dire que ton code peut induire en erreur. Évite ce genre d'écriture :

for (let startIconNum of startIconsNum) if (condition) {


ps :
- même en JS ou autres langages, utilise la PEP20 Smiley cligne
- en complément :

for (let n of searchResultName) {
    n.addEventListener('click', function () {
        resultsContainer.innerHTML = "";
        runSearchedTargetClass(startIconNum.innerHTML === n.dataset.id, startIconsNum)
    });
}

Modifié par niuxe (10 Mar 2021 - 12:34)
Merci beaucoup du temps que tu m'accorde, j'avais regardé la page sur les Fonctions JavaScript mais j'avais pas trouvé que cette écriture était particulièrement mise en avant. Il va falloir que je changes toutes les fonctions de mon code ... Bref, j'ai abouti à ça (j'en suis pas super fier car je suis obligé de répéter ma boucle à chaque endroits où j'appelle ma fonction) j'espère que ça respecte la PEP20 que je viens de lire pour la première fois (;

for (let n of searchResultName) {
    n.addEventListener('click', function () {
        resultsContainer.innerHTML = "";
        for (let startIconNum of startIconsNum) {
            runSearchedTargetClass(startIconNum.innerHTML === this.getAttribute('data-id'), startIconNum);
         }
    });
}


const runSearchedTargetClass = function(condition, startIconNum) {
     if (condition) {
        return enableSelectedIcon(startIconNum);
     }
};


C'est vrai que j'ai toujours fait du javascript très basique, seulement des cliques sur des éléments etc ( pour le web ) sans vraiment m'aventurer dans le language, mais je me suis trouvé un projet avec leaflet et pas le choix d'utiliser Javascript, je ne suis quand même pas déçu, c'est un très beau language selon moi.
Bonne journée!

EDIT:

runSearchedTargetClass(startIconNum.innerHTML === n.dataset.id, startIconsNum)

je prends notes
Modifié par vzytoi (10 Mar 2021 - 12:52)