11548 sujets

JavaScript, DOM et API Web HTML5

Des petits boutons qui ne fonctionnent pas...

Modérateur
Bonjour,

Je cherche à générer un formulaire dynamiquement à l'aide de l'API DOM. Pour la mise en place du formulaire, tout se passe normalement mais lorsque je souhaite affecter des propriétés aux évènements 'onclick' sur mes boutons radio, çà cafouille.
Quand je regarde la console javascript, elle me dit:
a écrit :
petitsboutons has no properties ...


Comme jusqu'à maintenant, je ne me suis pas trop servi du javascript, je ne suis pas sûr d'adopter le bon principe.

Est-ce une erreur de code ou bien une erreur de conception? Peut-être faut-il s'y prendre autrement?

Bref, voici la partie du code qui me semble incriminée:
function FormDyn()
	{
...
	}

function Choice()
	{
...
	}

function InitMouseOnClick()
	{

		var clic = document.getElementById( 'mouseonclick' );
		
		var petitsboutons = clic.getElementsByTagName( 'formulaire' ).choix;
		
		for( var a = 0 ; a < petitsboutons.length ; a++ )
				petitsboutons[a].onclick = Choice;

	}

window.onload = function()
	{
		FormDyn();
		InitMouseOnClick();
	}
... et des fois que çà ne suffise pas, vous pouvez voir le script complet par ici:
XHTML: testDOM.htm
JS: script.js

Merci d'avance.
Modifié par koala64 (30 Jan 2006 - 20:47)
salut,

Il me semble qu'il y'a quelques petites erreurs dans ta boucle


for( var a = 0 ; a < petitsboutons.length ; a++ )

se base sur 
var petitsboutons = clic.getElementsByTagName( 'formulaire' ).choix;

ou choix n'est pas un tableau. De plus tu ne pas acceder à la variable choix puisqu'elle n'est pas globale.
petitsboutons[a].onclick = Choice[b]()[/b];

les parenthèses c'est mieux pour acceder à une fonction


et pour info, sur en me basant sur le tableau childnodes j'arrive à effacer tous les noeuds enfants d'un élément:
http://forum.alsacreations.com/topic-5-10874-1-RsoluPb-avec-removeChild.html#p88454
Modifié par ilhooq (29 Jan 2006 - 05:49)
Modérateur
Salut,

Merci de t'être penché sur mon problème... Smiley cligne

En fait, je suis parti de ce tuto pour écrire le code de la fonction InitMouseOnClick().

Regarde leur fonction initMouseovers(), elle est écrite à l'identique.

J'ai testé tes deux solutions ( avant et après edit Smiley ravi ) et la même erreur se reproduit.

Je ne suis pas sûr que çà vienne de là quand je vois çà. Smiley ohwell
j'ai jeté un oeil à la fonction originale en question


function initMouseovers() {
   var nav = document.getElementById('mouseovers'); //on est ok
   var imgs = nav.getElementsByTagName('img'); 
   for (var j=0;j<imgs.length;j++) {
      imgs[j].onmouseover = mouseGoesOver;
      imgs[j].onmouseout = mouseGoesOut
   }
}

getElementsByTagName('img') fait référence à tous les éléments images (<img>)du bloc "nav" ventilés dans un tableau. exemple: pour atteindre le premier élément image on fait: getElementsByTagName('img')[0] et ainsi de suite...
getElementsByTagName( 'formulaire' ) n'est donc pas possible car il n'existe pas d'éléments <formulaire> dans une page html.
Modifié par Felipe (30 Jan 2006 - 13:08)
J'ai arrêté ma lecture sur cette ligne :
var petitsboutons = clic.getElementsByTagName( 'formulaire' ).choix;


Une balise <formulaire> ça n'existe pas.
Modérateur
ola! oui! Smiley confused je fatigue moi...

Bon, le problème est corrigé... ainsi que d'autres d'ailleurs... Smiley ravi

Il me reste un petit soucis puisque lorsque je clique sur un bouton radio puis sur le second, les noeuds s'ajoutent au lieu d'être remplacés mais bon, çà ne devrait pas être un trop gros soucis... Je m'y attèle tout à l'heure... Smiley murf

Merci encore... Smiley cligne

Je vais peut-être bien me servir de ta fonction qui tue les enfants, ilhooq. Smiley lol
Modifié par koala64 (29 Jan 2006 - 07:02)
Mais je t'en prie c'est fait pour! Smiley cligne
Je suis heureux de pouvoir apporter ma modeste contribution à la communauté!
Modérateur
Rebonjour,

Bon, je viens redemander votre aide parce que décidemment, je tourne en rond. Smiley sweatdrop

J'ai réécris le script autrement histoire de minimiser les imbrications, ceci dans un soucis de clarté.

Aussi, le but actuel du script est de remplacer le contenu du document xhtml par un formulaire avec deux boutons radio puis de générer automatiquement un ou deux champs texte en fonction du choix de l'utilisateur, le tout s'en écrire le moindre élément javascript dans la partie xhtml.

Actuellement, le formulaire est correctement affiché mais le choix se fait automatiquement et les boutons ne fonctionnent pas. Il y a donc un problème sur la fonction InitMouseOnClick() ou la fonction Choix() on dirait... Smiley ohwell

Quelqu'un pourrait-il me donner un petit coup de pouce et me dire, par la même occasion, quelle(s) notion(s) je ne semble pas avoir assimilé?

Je vous redonne les urls:

XHTML
JS avec commentaires ou JS sans commentaires.

Merci à vous. Smiley smile
Modifié par koala64 (30 Jan 2006 - 21:50)
Modérateur
Salut,

Je me permets de relancer le sujet de nouveau... J'ai mis toute une batterie de test pour voir d'où provenait mon erreur ce qui m'a permis d'avancer mais je rebloque de nouveau... Smiley decu

Aujourd'hui, j'ai résolu le problème du choix automatique. En revanche, sous Firefox, le script m'affiche systématiquement le champ affecté au choix numéro 2 et ce, quelquesoit le bouton cliqué. Sous IE, c'est différent! Les boutons radio ne semblent pas être reconnus et ne fonctionnent donc pas lorsqu'ils sont cliqués...

Cà fait maintenant plusieurs jours que je m'acharne, çà avance et je sens que je ne suis pas loin mais j'avoue qu'un avis éclairé me serait d'un grand secours...

Les codes sont ici:

XHTML
JS

Merci.
Modifié par koala64 (02 Feb 2006 - 19:49)
Modérateur
Effectivement, il y a un soucis... En faisant ce code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

	<title>Test InitMouseOnClick()</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript"><!--

	function display()
	{
		var tag = document.getElementsByTagName( "p" ).style.display;
		tag.onclick = "none";
	}

	function InitMouseOnClick()
	{
		var conteneur = document.getElementById( "mouseonclick" );
		var boutons = conteneur.bouton;

		for( var a = 0 ; a < boutons.length ; a++ )
			boutons[a].onclick = display;

	}

	window.onload = InitMouseOnClick();

	//--></script></head><body>

	<form>
		<fieldset>
			<legend>formulaire test</legend>
			<div id="mouseonclick">
				<label>bouton test -></label>
				<input type="submit" name="bouton" />
				<label>bouton test 2 -></label>
				<input type="submit" name="bouton" />
				<p>Une phrase vouée à disparaître.</p>
			</div>
		</fieldset>
	</form>

</body></html>

J'obtiens:
a écrit :
conteneur has no properties

Là, j'ai du mal à saisir... Smiley ohwell
j'ai regarder dans ton code la fonction formdyn() qui me semblait correcte... c'est pour ça que l'erreur doit se situer dans la fonction Initmouseclick()

sinon juste un petit détail:
dans la fonction exist, si la condition passe à else tu ne pourras pas retourner la variable exist puisqu'elle n'existera pas donc rajouter dans else:var exist = null;
Modérateur
- Les péripéties d'un koala dans le monde du js - chap.12 - Smiley eek

Pourquoi lorsque je fais ceci sur le formulaire ci-dessus çà me pose le même problème?
	window.onload = function()
	{
		document.getElementsByTagName( "p" ).style.display = "none";
	}
a écrit :
document.getElementsByTagName( "p" ).style has no properties


>>> euh oui mais dans la fonction Exist(), je ne cherche pas à retourner la variable exist... Si justement elle n'existe pas, je souhaite seulement afficher une alerte. En fait je ne la définie que si le noeud existe...
Modérateur
ah... oui, je viens de comprendre pourquoi tu me dis çà... Smiley lol c'est parce que la suite n'est pas incluse dans la condition... grr... qu'est-ce que je galère avec ce langage! Smiley biggol
Modifié par koala64 (03 Feb 2006 - 00:45)
c'est normal que ça ne marche pas car document.getElementsByTagName( "p" ) renvoie un tableau et pas un objet donc il ne peut pas avoir la propriété style.
pour que ça marche il faut faire ça:

		window.onload = function()
	{
		document.getElementsByTagName( "p" )[0].style.display = "none";
	}
Par contre sous IE je n'arrive pas à cocher les boutons radio et je ne vois pas d'ou ça vient... Peut être un bug d'IE... Smiley ohwell
Sujet clos
Aller à