className onclick

ZuckBin · 6 Mars 2009

Bonjour,

Je suis un total débutant en JS.

je veux juste ajouter une classe à une class existante sur un <a> voici mon code:

<script type="text/javascript">
window.addEvent('domready', function() {

	function addClass(element,value) {
		if(!element.className){
		element.className = value;
		}else{
		newClassName = element.className;
		newClassName+= " ";
		newClassName+= value;
		element.className = newClassName; 
		}
	}
});

</script>

<a href="#" class="pictofleche" onclick="addClass(test);"></a>

J'ai une erreur:

test is not defined

ce que je souhaite:

<a href="#" class="pictofleche test" onclick="addClass(test);"></a>

Merci de votre aide,

Cordialement.

cyberlaura · 6 Mars 2009

Bonjour ZuckBin,

comme ça vite fait vu l'heure, tu fais un addclass(test) alors que tu n'as pas défini d'id pour ton lien. Ca fonctionnerai donc mieux si tu faisais :

<a href="#" id="test" class="pictofleche" onclick="addClass(test);"></a>

SStephane · 6 Mars 2009

Je dirais plutot :

<a href="# class="pictofleche" onclick="addClass(this,'test');"></a>

pas besoin de définir d'id à priori, d'un autre coté complète un peu ta fonction, elle a l'air inachevée

c'ets pour pas te retrouver avec un truc du genre

<a href="#" class="pictofleche test test test test test test test test test test test test" onclick="addClass(this,test);"></a>

Modifié 6 Mars 2009 par SStephane

ZuckBin · 9 Mars 2009

Je me retrouve avec ceci:

<a class="pictofleche http://nomdomain.com/#" onclick="addClass(this,'TEST');" href="#"/>

Pour faire simple je veux juste un changement de class sur le onclick

on a ceci: pictofleche, on click on a ceci: pictofleche TEST, je reclick, j'ai : pictofleche

Merci

SStephane · 9 Mars 2009

Essai donc ceci :

	function addClass(_element,_value)
	{
		try
		{
			var oReg = new RegExp("(^|s)"+_value+"(s|$)");

			if(!_element.className)
			{
				_element.className = _value;
			}
			else
			{
				var bTest = oReg.test(_element.className);
				if(bTest)
				{
					_element.className = _element.className.replace(oReg,'');
				}
				else
				{
					var newClassName = element.className;
					newClassName+= " ";
					newClassName+= _value;
					element.className = newClassName;
				}
			}
		}
		catch(e)
		{

		}
	}

J'ai pas testé mais ça doit être pas loin de ce que tu veux.

Stéphane.

Modifié 9 Mars 2009 par SStephane

ZuckBin · 9 Mars 2009

J'ai essayer ton code Stéphane, ça ne change rien

J'ai donc mis ceci:

<a href="#" class="pictofleche" onclick="addClass(this,'active');"></a>

et j'ai copier coller ton code tel quel.

Ca fais exactement comme avant.

j'ai meme essayer de remplacer "_value" partout dans le code par ma classe "active", même résultat.

SStephane · 9 Mars 2009

Mauvais c/c du code existant

	function addClass(_element,_value)
	{
		try
		{
			var oReg = new RegExp("(^|s)"+_value+"(s|$)");

			if(!_element.className)
			{
				_element.className = _value;
			}
			else
			{
				var bTest = oReg.test(_element.className);
				if(bTest)
				{
					_element.className = _element.className.replace(oReg,'');
				}
				else
				{

					var newClassName = _element.className;
					newClassName+= " ";
					newClassName+= _value;
					_element.className = newClassName;
				}
			}
		}
		catch(e)
		{

		}
	}

Modifié 9 Mars 2009 par SStephane

ZuckBin · 9 Mars 2009

J'ai pas compris la, j'ai bien c/c le code, et ça change pas

SStephane · 9 Mars 2009

var oReg = new RegExp(_value+"$");

La regex fonctionnait pas, pourtant elle semblait pas trop mal, colle ça à la place et ça marchera (j'ai testé ce coup ci), creuse de ce coté si tu cherches un truc moins perfectible...

Modifié 9 Mars 2009 par SStephane

ZuckBin · 9 Mars 2009

Ca fais toujours pareil.

Je comprend pas

SStephane · 9 Mars 2009

Crée une page HTML et colle ceci, tu pourras constater que ça fonctionne, maintenant, je crois qu'il va falloir que tu creuses un peu par toi même aussi

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type="text/javascript">
	function addClass(_element,_value)
	{
		try
		{
			var oReg = new RegExp("^([\s]*)"+_value+"$");

			if(!_element.className)
			{
				_element.className = _value;
			}
			else
			{
				var bTest = oReg.test(_element.className);

				if(bTest)
				{

					_element.className = _element.className.replace(_value,"");
				}
				else
				{				
					var newClassName;
					newClassName = _element.className;
					newClassName+= " ";
					newClassName+= _value;
					_element.className = newClassName;
				}
			}
		}
		catch(e)
		{

		}
	}
</script>
<style type="text/css">
.blue
{
	color:blue!important;
}
.green
{
	color:green;
}
</style>
</head>
<body>
<a href="#" class="green" onclick="addClass(this,'blue');">Lien</a>
</body>
</html>

ZuckBin · 9 Mars 2009

Effectivement, merci Stéphane pour cette aide, je vais me débrouiller pour le faire fonctionner sur mon site

Connexion

className onclick

Sujets conseillés

ZuckBin

cyberlaura

SStephane

ZuckBin

SStephane

ZuckBin

SStephane

ZuckBin

SStephane

ZuckBin

SStephane

ZuckBin

Veuillez vous connecter pour commenter

Parcourir

Activité