Pourquoi ma fonction JavaScript est-elle en conflit avec l'ID d'un élément de formulaire ?

Le nom de la fonction JavaScript est en conflit avec l'ID de l'élément

Problème :
En JavaScript, une fonction peut avoir le même nom qu'un ID d'élément. Cependant, dans certains cas, cela peut conduire à des erreurs. Considérez les deux extraits de code suivants :

// Works as expected
function border(border) { alert(border); }

const select = document.getElementById('border');
select.addEventListener('change', () => border(select.value));

// Fails with "not a function" error
function border(border) { alert(border); }

const form = document.getElementById('border');
form.addEventListener('change', () => border(form.value));

Pourquoi le premier extrait fonctionne-t-il alors que le second échoue ?

Solution :
Ce problème est dû à une fonctionnalité héritée introduite dans les versions JavaScript 1.0 à 1.3. Lorsqu'un élément de formulaire fait partie d'un formulaire, il hérite des propriétés du formulaire. L'une de ces propriétés est le nom de l'élément, qui peut également être utilisé pour référencer l'élément.

Dans le deuxième extrait, le nom de la fonction « border » est en conflit avec la propriété du formulaire du même nom. Lorsque l'écouteur d'événements est déclenché, JavaScript tente d'appeler la propriété "border" du formulaire en tant que fonction, ce qui échoue.

Selon la spécification HTML W3C DOM niveau 2, les éléments sont accessibles par leur nom ou leur identifiant en utilisant la syntaxe de l'accesseur de propriété bracket. Cependant, les navigateurs plus anciens ont étendu cette fonctionnalité aux contrôles de formulaire, permettant d'y accéder par leur nom ou leur identifiant en utilisant la notation par points.

Prévenir le conflit :
Pour éviter ce problème, vous devez vous assurer que les noms de fonctions n'entrent pas en conflit avec les ID d'élément ou d'autres propriétés JavaScript. De plus, vous pouvez utiliser des méthodes plus spécifiques, telles que document.querySelector(), pour localiser des éléments.

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!