Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

Pages : 1

#1 Le 04/06/2015, à 09:47

hyppothalus

Petit problème Javascript

Bonjour à tous,

Je viens ici car je sais que la communauté de Ubuntu est une tête en programmation alors je viens demander de vos lumières

J'ai un code javascript qui s'execute lorsque l'on clique sur un bouton, cela marche la première fois plus la seconde il fait comme si j'avais cliquer 2 à 4 fois d'affilé dessus (4 alertes)

Voici le code HTML

<form id="Main_Form">
			<textarea id="Main_Article" rows="20" cols="50"></textarea>
			<textarea id="Main_Quantity" rows="20" cols="5"></textarea>
			<textarea id="Main_Price" rows="20" cols="5"></textarea><br />
			<input id="Main_TXT_EAN" cols="100" type="text" name="TXT_EAN">
			<input onClick="Add_Article()" id="Main_BTN_EAN" type="submit" name="BTN_EAN" value="EAN">
			</form>

Et Javascript

function Add_Article()
{
	Main_Article = document.getElementById('Main_Article');
	Main_Quantity = document.getElementById('Main_Quantity');
	Main_Price = document.getElementById('Main_Price');
	Main_TXT_EAN = document.getElementById('Main_TXT_EAN');
	Main_BTN_EAN = document.getElementById('Main_BTN_EAN');
	
	Main_Form.addEventListener('submit', function(e) 
	{
		alert(Main_Article.value);
		e.preventDefault();
		Main_Article.value += "\nEvian";
		Main_Quantity.value += "\n1";
		Main_Price.value += "\n1,00";
    }, true);
}

La première fois une alerte (normal la fonction s’exécute que une fois, puis après c'est 3 à 4 fois d'affilé)

La radio du libre c'est Radio-Virtuelle
http://www.radio-virtuelle.fr

Hors ligne

#2 Le 04/06/2015, à 10:18

bruno

Re : Petit problème Javascript

C'est à cause de l'attribut onclick qui fait double emploi avec la méthode addEventListener…

Hors ligne

#3 Le 04/06/2015, à 10:23

hyppothalus

Re : Petit problème Javascript

Le problème c'est que j'ai besoins d'utiliser la fonction "preventDefault" pour ne pas que le formulaire se recharge donc j'ai un peu le *** entre deux chaises donc si quelqu'un à la solution ce serais génial car moi et le javascript j'ai encore beaucoup de mal (Je préfères le PHP tongue)

Dernière modification par hyppothalus (Le 04/06/2015, à 10:53)

La radio du libre c'est Radio-Virtuelle
http://www.radio-virtuelle.fr

Hors ligne

#4 Le 04/06/2015, à 11:08

Rufus T. Firefly

Re : Petit problème Javascript

Salut,

element.addEventListener ajoute un "capteur" à l'élément.
Il ne faut évidemment le faire qu'une fois, par exemple au chargement de la page. Or là, tu en ajoutes un à chaque appel de ta fonction (ça bouffe des ressources pour rien), mais en plus tu le mets aussi sur la balise :
<input onClick="Add_Article()" id="Main_BTN_EAN" type="submit" name="BTN_EAN" value="EAN">

Et dans la syntaxe : element.addEventListener(type, listener, useCapture)
type, c'est le type d'action à capter. Il faut voir ce qui est disponible pour la balise concernée : onClick, onKeyUp, onKeyDown, etc., le type étant alors simplement, click, keyup, keydown, etc.
listener, c'est nom de la fonction qui va être appelée quand l'événement se produit
quant à useCapture, il vaut mieux mettre false, dans un premier temps (ça a à voir avec le bullage, qui fait qu'un événement qui se produit sur un élément remonte le long de l'arbre dom, cf un peu de théorie)

Ça peut donner un truc du genre :

// Chargement de la page : ajout du capteur
window.onload = function() {
  var el = document.getElementBy... <= à toi de voir comment tu trouves ton bouton
  el.addEventListener("click", submit_click, false);
}

// Réaction à l'événement suivi, et toutes les autres fonctions
function submit_click(event) {
  ici le traitement à faire
  return true; <= effectue l'action par défaut de l'événement (submit, ici)
}

Si tu fais return false; (je n'avais pas vu tes posts depuis), je pense que le submit n'est pas exécuté. Si ça ne suffit pas, tu fais comme tu l'avais indiqué.
Et puis si tu interceptes et que le bouton n'est pas censé faire ce pourquoi il est conçu, tu n'es pas obligé de prendre un bouton submit...

Et la balise : 

<input id="Main_BTN_EAN" type="submit" name="BTN_EAN" value="EAN">

De toutes façons il ne faut rien mettre dans les balises html, c'est ingérable assez vite, mais ici, en plus, c'est redondant avec le code javascript et ça posera des problèmes...
Le côté dynamique, c'est un ou plusieurs fichiers javascript
La mise en forme, c'est des fichiers css...

Dernière modification par Rufus T. Firefly (Le 04/06/2015, à 11:17)

La provocation est une façon de remettre la réalité sur ses pieds. (Bertolt Brecht)
Il n'y a pas de route royale pour la science et ceux-là seulement ont chance d'arriver à ses sommets lumineux qui ne craignent pas de se fatiguer à gravir ses sentiers escarpés. (Karl Marx)
Il est devenu plus facile de penser la fin du monde que la fin du capitalisme

Hors ligne

#5 Le 04/06/2015, à 11:12

tiramiseb

Re : Petit problème Javascript

Salut,

De deux choses l'une :
- soit tu veux que la fonction JS soit explicitement appelée dans le code HTML ("onclick"), auquel cas tu enlèves le "addEventListener"
- soit tu veux que ce soit tout géré en JS, auquel cas tu enlèves le "onclick"

Dans le premier cas, pour que l'action par défaut ne se fasse pas il faut faire un "return false" à la fin de la fonction.
Dans le second cas, pour que ça se mette correctement en place, il faut virer la fonction "AddArticle", mettre directement ton code à la "racine" du fichier JS, et puis appeler le JS tout à la fin de ton code HTML pour que les éléments soient en place quand le JS se charge.


Premier cas :

function Add_Article()
{
	Main_Article = document.getElementById('Main_Article');
	Main_Quantity = document.getElementById('Main_Quantity');
	Main_Price = document.getElementById('Main_Price');
	Main_TXT_EAN = document.getElementById('Main_TXT_EAN');
	Main_BTN_EAN = document.getElementById('Main_BTN_EAN');
	alert(Main_Article.value);
	Main_Article.value += "\nEvian";
	Main_Quantity.value += "\n1";
	Main_Price.value += "\n1,00";
        return false;
}

Second cas :

Main_Form.addEventListener('submit', function(e) {
		Main_Article = document.getElementById('Main_Article');
		Main_Quantity = document.getElementById('Main_Quantity');
		Main_Price = document.getElementById('Main_Price');
		Main_TXT_EAN = document.getElementById('Main_TXT_EAN');
		Main_BTN_EAN = document.getElementById('Main_BTN_EAN');
		alert(Main_Article.value);
		e.preventDefault();
		Main_Article.value += "\nEvian";
		Main_Quantity.value += "\n1";
		Main_Price.value += "\n1,00";
}, true);

ATTENTION : dans les deux cas je vois une potentielle erreur, car la variable Main_Form n'a pas été définie. Certainement un bout de code que tu as ailleurs...

Sébastien Maccagnoni - https://www.maccagnoni.eu - https://www.domotego.com

Hors ligne

#6 Le 04/06/2015, à 11:14

tiramiseb

Re : Petit problème Javascript

Pour le second cas, comme Rufus l'indique si bien, tu peux le faire aussi lors du windows.onload, c'est d'ailleurs plus propre.

Sébastien Maccagnoni - https://www.maccagnoni.eu - https://www.domotego.com

Hors ligne

#7 Le 04/06/2015, à 11:17

hyppothalus

Re : Petit problème Javascript

Je te remercies, il me reste beaucoup de chose à apprendre... Je penses que l'AJAX avec le PHP ne sera pas au programme avant l'année prochaine.

Mais c'est bon ça fonctionne je te remercies beaucoup, je n'ai plus que à analyser le code et le comprendre wink

Cordialement, Jérémy

La radio du libre c'est Radio-Virtuelle
http://www.radio-virtuelle.fr

Hors ligne

#8 Le 05/06/2015, à 01:38

Rufus T. Firefly

Re : Petit problème Javascript

J'ai complètement oublié de préciser quelque chose que j'ai en fait modifié spontanément.
Tu accroches un capteur au formulaire, avec ton code. Et le capteur réagit à l'envoi du formulaire (submit). C'est possible de faire ça.
Mais dans la balise, le onClick que tu as mis concerne bien le bouton et pas le formulaire. Et c'est en effet beaucoup plus logique d'attribuer un capteur à l'élément sujet à l'événement (ici un clic). Pourquoi ? Dans ce cas précis, submit, il est probable que ça ne risque rien. Mais dans d'autres cas, le bullage pourrait avoir des effets fâcheux.
Exemple :

<div id="exemple">
  <p> </p>
  <p onClick="fonction" > </p>
...

Tu cliques sur le second paragraphe, ça fonctionne, tu cliques ailleurs, il ne se passe rien

Tu fais la "même" chose que ce que tu as fait en javascript

var el = document.getElementById("exemple");
el.addEventListener("click", div_clic, false);

Tu cliques sur le second paragraphe, ça fonctionne, mais tu cliques n'importe où ailleurs dans la <div>, ça fonctionne aussi. Pourquoi ? Le clic remonte toute l'arborescence jusqu'à <body> (au moins, plus haut, je ne me souviens plus). Donc forcément il arrive sur la <div>...

Cela dit, ça peut être pratique de faire ça, mais alors, dans la fonction de traitement, il faut identifier ce qui a été cliqué. Et ça, tu peux le trouver dans event qui est transmis à la fonction. Par exemple event.target.id

...
<p id="p2" >
...

puis 

function div_clic (e) {
  if (e.target.id == "p2") {
    // traitement
  }
}

Donc là, tu as une seule fonction qui peut traiter divers cas...

Amuse-toi bien...

A propos :
Ajax, c'est une bibliothèque qui repose sur XMLHttpRequest.
Les trucs pas trop sophistiqués, tu peux les faire directement avec XMLHttpRequest. Ce n'est pas si compliqué que ça...

La provocation est une façon de remettre la réalité sur ses pieds. (Bertolt Brecht)
Il n'y a pas de route royale pour la science et ceux-là seulement ont chance d'arriver à ses sommets lumineux qui ne craignent pas de se fatiguer à gravir ses sentiers escarpés. (Karl Marx)
Il est devenu plus facile de penser la fin du monde que la fin du capitalisme

Hors ligne

#9 Le 05/06/2015, à 06:14

tiramiseb

Re : Petit problème Javascript

Ajax, ce n'est pas une bibliothèque, c'est une méthode... smile

Sébastien Maccagnoni - https://www.maccagnoni.eu - https://www.domotego.com

Hors ligne

Pages : 1