hy!
Je fais les premiers exercices du livre "Exercices pour programmeurs: 57 défis pour développer vos compétences de codage" de Brian P. Hogan, ce qui nécessite une manipulation DOM.
Ce cas spécifique, j'ai une forme et je veux obtenir et déclarer dans le fichier JS le formulaire, les entrées du formulaire et une div. Je ferais habituellement: mais je veux faire une fonction similaire à celle-ci: et en chrome i Obtenez l'erreur: SyntaxError incluse: identifiant 'Element' a déjà été déclaré
Cette fonction doit obtenir l'élément par son identifiant et le déclarer. Savez-vous comment je peux faire cela? Merci! < / p>
4 Réponses :
function getDomElementById(element) {
const element = document.getElementById(`${element}`);
}
Here you redeclared variable named element.
const element is wrong.
Please rename this variable.
Pourquoi ne pas utiliser un objet pour les éléments, comme ou prenez une approche dynalique avec un tableau d'identifiants et d'un objet avec les identifiants comme des touches.
Vous ne pouvez pas créer de variables comme ça, mais vous pouvez utiliser l'objet
let obj = {};
const getDomElementById = (element) => {
obj = {
...obj,
[element]: document.getElementById(`${element}`),
}
}
Si vous souhaitez écrire moins de code, donnez à la fonction un nom plus court et de renvoyer la sélection: Le problème avec la fonction d'affiliation aux variables à l'extérieur est: P> 1) Le code de code n'est pas plus court que l'original qui utilise 2) La fonction écrase les valeurs sur l'extérieur peut entraîner des bugs ennuyeux, où vous recherchez quelle fonction a écrasé la variable à quelle heure. p> 3) Vous en apprendrez bientôt sur document.getElementByID () code> directement. Et vous devrez utiliser un objet pour désigner les éléments à l'aide d'une chaîne comme 'myform' code>. Donc, vous finirez par avoir à utiliser des valeurs.myformer partout où vous souhaitez l'utiliser. P> .Queryselectorall () code>, qui est similaire à . GetElementyID () code>, mais permet également aux classes et à des sélecteurs complexes CSS.
Si vous utilisez toujours votre fonction, vous devez ajouter un autre paramètre à représenter le nom: P> const myForm = document.querySelector( 'section.validation-form > .myForm' );
const noun = document.querySelector( 'section.validation-form > .noun' );
const verb = document.querySelector( 'section.validation-form > #verb.active' );
Merci pour votre réponse en profondeur!
élément est le nom du paramètre, vous ne pouvez pas également l'utiliser comme unconst .Cela n'a aucun sens d'avoir une fonction déclarer des variables pour l'extérieur. Cela ressemble à un XY Problème - Qu'essayez-vous de résoudre?
Supprimer
const et vous êtes prêt à partir@nickzoum Pas exactement -
Elément STANDS SMARCHES L'élément externe, la mission ne ferait donc rien pour la variable extérieure. La variable externe a égalementconst , donc même sans le nom qui ne t'interrate que vous ne pouvez pas l'affecter. Ensuite, même si la liaison est mutable, c'est juste étrange d'avoir une fonction faire des missions dans la portée extérieure. Donc, je ne dirais pas "bien" mais cela peut fonctionner comme in - ne pas lancer d'erreurs. Je ne suis pas convaincu que c'est "bon" comme dans "idée" ou "conception".@Vlaz je veux faire une fonction qui déclare une variable avec un objet d'élément représentant l'élément dont la propriété ID est l'argument de la fonction. La sortie de cette fonction (MyForm) devrait être une variable: MyForm = Document.getelementByID ('myform');
Cela ressemble à une solution particulière vous essayez de mettre en œuvre. Pourquoi auriez-vous besoin d'une telle fonction? Il est extrêmement rare de besoin une fonction pour désordre avec l'état global et juste faire des missions. Si une fonction ne fait qu'une mission, il est préférable de supprimer la mutation globale de celle-ci et de le rendre renvoyé tout ce qu'il serait autrement attribué. Donc, cela signifie que vous auriez
fonction getdomelementbyid (élément) {retour document.getelementbyid ( $ {élément}); } ce qui signifie que c'est justedocument.getelementByID (élément) avec des étapes supplémentaires.@Vlaz Quelqu'un m'a dit une fois que si vous faites la même chose plusieurs fois, vous pouvez probablement faire une fonction qui peut le faire pour vous. J'essayais donc de mettre en œuvre cela pour rendre mon code plus court. Mais je vois que dans ce cas particulier, ce n'est pas le cas. Merci!