11548 sujets

JavaScript, DOM et API Web HTML5

Modifier le contenu d'une div

grace à des exemples sur internet, j'arrive à modifier le contenu d'une div avec getElementById et innerhtml

mais lorsque les div ont le même ID (que j'utilise pour les css), le probleme se corse

J'ai essayer avec getelementsByName et ByTag mais je n'y suis pas arrivé ...
Faut dire que le javascript c'est pas forcement mon langage préféré

quelqu'un à t'il un exemple concret a me proposer, sans utiliser les Id, ou une solution pour contourner ce problème
Merci
Modérateur
Bonjour danou9, bienvenue sur Alsacréations Smiley cligne

a écrit :
mais lorsque les div ont le même ID (que j'utilise pour les css), le probleme se corse
Ca, c'est invalide. Un identifiant ne peut apparaitre qu'une fois dans ta page html. Dans ce cas, tu dois passer par les classes.

Un petit exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<title>Exemple</title>
		<script type="text/javascript"><!--

(function() {

var oO =
{
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},

	init: function(sEl, sClass, sFragment)
	{
		var oEl, iI;

		oEl = document.getElementsByTagName(sEl);
		iI = oEl.length;

		do
		{
			if(oEl[--iI].className === sClass)
				oEl[iI].innerHTML = sFragment;
		}
		while(iI > 0);
	}
};

oO.connect(
	window,
	'load',
	function()
	{
		oO.init('div', 'modif', '<p>coucou</p>');
	},
	false
);

})();

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

<div></div>
<div class="modif"></div>
<div></div>
<div class="modif"></div>
<div class="modif"></div>

	</body>
</html>
Sujet clos
Aller à