addEvent et getElementById incompatible

Sujet résolu

3 mars 2009 à 22:28:29

Bonsoir à tous.

Je dois faire un petit truc en JS et donc je me suis dit que c'était l'occasion d'essayer de faire du JS propre. C'est à dire virer les onClick, onChange etc... du code HTML et les foutre à l'extérieur comme montré dans ce tuto là.

Le problème est qu'à la fin avec les getElementById ça ne marche pas.
Voici le code:

<html>
<head>
<script>

function addEvent(obj, event, fct) {
    if (obj.attachEvent) //Est-ce IE ?
        obj.attachEvent("on" + event, fct); //Ne pas oublier le "on"
    else
        obj.addEventListener(event, fct, true);
}

function al1() { alert(1); } //Trois fonctions quelconques
function al2() { alert(2); }
function al3() { alert(3); }
 
addEvent(window , "load", al1); //On les lance toutes les deux au chargement de la page
addEvent(window , "load", al2);
addEvent(document.getElementById('truc'), "click", al3); //Un clic sur "truc" déclenche la fonction al3()

</script>
</head>
	<body>
			<p><a href="#" id="truc">Lorem ipsum dolor etc...</a></p>
	</body>
</html>

Au début j'ai bien les 2 alert qui s'affichent mais lorsque je clique sur le lien j'ai rien. J'ai essayé avec

addEvent(window, "click", al3);

et là lorsque je clique sur la fenêtre j'ai bien l'alerte.
WTF avec getElementById o_O

? Où est-ce que j'ai merdé?

Merci à ceux qui me répondront

Timot

3 mars 2009 à 22:36:12

Beh tu essaye de lui rajoute un événement alors qu'il est pas encore créé -_- ...

Jagwa'K

3 mars 2009 à 22:43:58

Hum effectivement ^^". Merci beaucoup à toi j'ai corriger mon erreur.

<html>
<head>
<script>

function addEvent(obj, event, fct) {
    if (obj.attachEvent) //Est-ce IE ?
        obj.attachEvent("on" + event, fct); //Ne pas oublier le "on"
    else
        obj.addEventListener(event, fct, true);
}

function al1() { alert(1); }
function al3() { alert(3); }
 
function	init()
{
	addEvent(document.getElementById('truc'), "click", al3); //Un clic sur "truc" déclenche la fonction al3()
}
 
addEvent(window , "load", init);
addEvent(window , "load", al1);

</script>
</head>
	<body>
			<p><a href="#" id="truc">Lorem ipsum dolor etc...</a></p>

	</body>
</html>

Golmote

3 mars 2009 à 22:46:06

Ou encore...

addEvent(window , "load", function() {
  addEvent(document.getElementById('truc'), "click", al3);
});

(En plus compact quoi)

Jagwa'K

3 mars 2009 à 22:55:05

Oki merci pour votre coup de main, c'est vrai que c'est mieux comme ça ^^.

Au passage j'en profite pour demander si quelqu'un a une piste pour le passage d'arguments aux fonctions?

Golmote

3 mars 2009 à 23:34:43

Tu peux être plus explicite ?

Jagwa'K

4 mars 2009 à 0:20:46

J'ai réglé le problème. Je parlais de transmettre des paramètres aux fonctions.
Mon script sera plus parlant:

<html>
	<head>
		<script type="text/javascript">

		function	addEvent(obj, event, fct)
		{
			if (obj.attachEvent)
				obj.attachEvent("on" + event, fct);
			else
				obj.addEventListener(event, fct, true);
		}

		function	checkAll(master, slave)
		{
			if (slave.length)
			{
				if (master.checked)
					for (var i = 0; i < slave.length; i++)
						slave[i].checked = true;
				else
					for (var i = 0; i < slave.length; i++)
						slave[i].checked = false;
			}
			else
			{
				if (master.checked)
					slave.checked = true;
				else
					slave.checked = false;
			}
		}

		addEvent(window , "load", function () {
			addEvent(document.getElementById('checkbox-master') , 'click', function () {
				checkAll(document.getElementById('form').foo, document.getElementById('form').bar);
			});
		});

		</script>
	</head>
	<body>
		<form id="form">
			<p>Une checkbox maîtresse</p>
			<p><input type="checkbox" name="foo" id="checkbox-master"></p>
			<p>Puis une liste de checkbox</p>
			<p><input type="checkbox" name="bar" value="1"/></p>
<!--
			<p><input type="checkbox" name="bar" value="2"/></p>
			<p><input type="checkbox" name="bar" value="3"/></p>
			<p><input type="checkbox" name="bar" value="4"/></p>
-->
		</form>
	</body>
</html>