[Résolu] Changer le style d'un formulaire dynamiquement par pom45i - page 1

Voilà mon problème, j'ai ma vidéo qui se met en route. Je voudrais que les lignes du formulaires changent de couleur au moment où se trouve la vidéo.
J'arrive à faire cela, le seul problème c'est que cela seulement marche pour une ligne sur deux.
Avec mon code, je m'attendais à soit que rien ne marche soit à que tout marche. Je n'arrive pas à comprendre pourquoi cela marche de façon sélective.

Voici le code, vous pouvez l'essayer et me dire où j'ai tout faux et pourquoi cela ne fonctionne pas, svp?

(PS: C'est à partir de la ligne 54 que cela se passe. )

<HTML>
<HEAD>
    <style type="text/css">
#editpanel
      {
	        position:   absolute;
	 	top:  50px;
		left: 30px;
                width:800px;
		height:500px;
		overflow: auto;
            }
	div.playercontainer
      {
        position:                      absolute;
        top:                              20px;
        left:                             300px;
        z-index:                             10;
      }			
			
    </style>

	<script type="text/javascript" src="http://www.longtailvideo.com/jw/embed/swfobject.js"></script>

<TITLE>Test</TITLE>

<SCRIPT LANGUAGE="JavaScript">
     var player           =    null;
     var currentPosition  =    null; 

     function playerReady(thePlayer) 
	 {
	player = window.document[thePlayer.id];
	addListeners();
	}

function addListeners() {
	if (player) { 
		player.addModelListener("TIME", "positionListener");
	
	} else {
		setTimeout("addListeners()",100);
	}
}

function positionListener(obj) { 
	currentPosition = obj.position; 
	var tmp = document.getElementById("posId");
	if (tmp) { tmp.innerHTML = "position: " + currentPosition; }

	
	var max= 40;	
   
for(var i=1; i<40; i++)
  
		{
   	var begin = document.getElementById("begin_"+i).value;
	var end = document.getElementById("end_"+i).value;
	var currentPosition2= currentPosition *1000;
	
	if (begin < currentPosition2 && currentPosition2 < end)
	{document.getElementById("begin_"+i).style.backgroundColor="orange";
	document.getElementById("end_"+i).style.backgroundColor="orange";}
	else
	{document.getElementById("begin_"+i).style.backgroundColor="white";
	document.getElementById("end_"+i).style.backgroundColor="white";}
	
			i++;
		}
}



</SCRIPT>
</HEAD>
<BODY>
 <div id="posId">position: 0</div>

 <div id="playercontainer" class="playercontainer"><a id="player" class="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a></div>

 <script type='text/javascript'>
  var so = new SWFObject('Simple_TitlePlugin_v5_fichiers/player-viral.swf','player','470','320','9','#ffffff');
  so.addParam('allowfullscreen','true');
  so.addVariable('file','http://f1.r.56.com/f1.c48.56.com/flvdownload/17/7/12713038534hd.flv');
  so.write('playercontainer');
</script>
   

<div id="editpanel">
	<form method="post" name="0" action="cible.php" >
		<input type="text" id="begin_1" name="begin" value="1000" onchange="verifybegin(this)" size=10 />
		<input type="text" id="end_1" name="end" value="1490" onchange="verifyend(this)" size=10/>
		<input type="button" onclick="request(readData,1);" value="OK" />
	</form>
	<form method="post" name="2" action="cible.php" >
		<input type="text" id="begin_2" name="begin" value="1510" onchange="verifybegin(this)" size=10 />
		<input type="text" id="end_2" name="end" value="7550" onchange="verifyend(this)" size=10/><input type="button" onclick="request(readData,2);" value="OK" />
	</form>
	<form method="post" name="3" action="cible.php" >
		<input type="text" id="begin_3" name="begin" value="7560" onchange="verifybegin(this)" size=10 />
		<input type="text" id="end_3" name="end" value="9270" onchange="verifyend(this)" size=10/>
		<input type="button" onclick="request(readData,3);" value="OK" />
	</form>
	<form method="post" name="4" action="cible.php" >
		<input type="text" id="begin_4" name="begin" value="9280" onchange="verifybegin(this)" size=10 />
		<input type="text" id="end_4" name="end" value="11500" onchange="verifyend(this)" size=10/>
		<input type="button" onclick="request(readData,4);" value="OK" />
	</form>
	<form method="post" name="5" action="cible.php" >
		<input type="text" id="begin_5" name="begin" value="11600" onchange="verifybegin(this)" size=10 />
		<input type="text" id="end_5" name="end" value="13040" onchange="verifyend(this)" size=10/>
		<input type="button" onclick="request(readData,5);" value="OK" />
	</form>
</div>
</BODY>
</HTML>

-----------------------EDIT------------------

En fait j'ai réglé ce problème en rajoutant un second listener (j'ai copié la fonction positionListener et renommé celle ci, en changeant la valeur de départ de i). Je ne sais pas pourquoi cela me donne le résultat voulu, et pourquoi cela ne marchait pas dès le départ. Si quelqu'un à un conseil sur comment améliorer ce code, ou une explication sur pourquoi cela fonctionne comme cela, je suis preneur.
Je rencontrerais plein de blocages si je ne comprends pas un peu mieux le langage.
Je ne le marque pas résolu encore. J'espère avoir des réponses.

pom45i

13 mai 2010 à 20:43:30

Tillertan

14 mai 2010 à 17:32:37

Bah ton problème, c'est que tu fais :

for (var i = 0; i < x; i++) {
	// blabla
	i++;
}

Or le i++; est fait automatiquement dans le for(), donc dans ton cas cela faisait deux i++; donc i += 2;

Et pour améliorer ton code :
1. Mettre un doctype a ta page
2. Mettre les balises html en minuscule (head et non HEAD, script et non SCRIPT etc..)
3. Utiliser <script type="text/javascript"> et non l'attribut language qui ne sert a rien
4. Faire une indentation de code correcte.

14 mai 2010 à 18:52:09

Là je me sens vraiment bête. Merci beaucoup.

Changer le style d'un formulaire dynamiquement

Changer le style d'un formulaire dynamiquement

Supprimer

Modérer

Signaler le message aux modérateurs