Problème avec firefox et IE

Problème avec firefox et IE - HTML/CSS - Programmation

Marsh Posté le 16-11-2011 à 10:25:59    

Bonjour,
 
Pourriez-vous me dire pourquoi le code suivant marche pour chrome et safari et pas sur firefox et IE ?
Je cherche depuis plusieurs jours, tenté plein de changements, mais je suis débutante en javascript et je sèche complètement. Merci de votre aide.
 
<html>
<body>
 
<html >
 
 <head>
 
  <title>Démineur</title>
   
  <script type="text/javascript" language=javascript>
   
 
 
 function choixprop(formulaire){
  if (formulaire.choix[0].checked) { A=10};
  if (formulaire.choix[1].checked) { A=20};
  if (formulaire.choix[2].checked) { A=30};
  fonction1()
 }
   
 
 function fonction1(){  
  //création d'un tableau
  aTab=new Array(A);
  for (i=0;i<A;i++){aTab[i]=new Array(10)}      
  for(i=0;i<A;i++)
  {  
   for(j=0;j<10;j++)
   {
   aTab[i][j]=j;
   }
  }
 bTab=new Array(A);
  for (i=0;i<A;i++){bTab[i]=new Array(10)}      
  for(i=0;i<A;i++)
  {  
   for(j=0;j<10;j++)
   {
   bTab[i][j]='"  "';
   }
  }
   
   
  //Affichage du tableau  
  document.write("<div style=position:relative;left:450px;>" )
  document.write("<form name=form method=post action=>" )
  document.write("<table  width=265 height=380 border=4  cellspacing=2><TR>" );
     for (i=0; i<A; i++)  
   {  
  document.write("<TR>" );
  for(j=0;j<10;j++)
  {  
   u=100*i+j;
   document.write("<TD>"+"<input id="+u+" type=button value='  '  ondblClick='affichevaleur("+i+","+j+","+u+" )' onclick='affichecouleur("+i+","+j+","+u+" )' >"+"</TD>" );
  }
 }
 
 document.write("</div></tr>" )
 document.write("</TR></table></form></div>" );
}
   
  // fonction pour changer le style  
  function style(B,id){
  switch (B) {
  case 0 : document.getElementById(id).setAttribute('style','background-color:#0099FF; color:#66CC00;font-weight:bold; font-size:large')
  break
  case 1 : document.getElementById(id).setAttribute('style','background-color:#0066FF; color:#FF9933;font-weight:bold; font-size:large')
  break
  case 2:  document.getElementById(id).setAttribute('style','background-color:#0033FF ; color:#FF6600;font-weight:bold; font-size:large')
  break
  case 3 : document.getElementById(id).setAttribute('style','background-color:#0000FF; color:#FF3366;font-weight:bold; font-size:large')
  break
  default : document.getElementById(id).setAttribute('style','background-color:#000099; color:#FF0000;font-weight:bold; font-size:large')
  break}
  }
   
  function affichecouleur(a,b,id){
  switch (bTab[a][b]){
  case '"  "' :
  document.getElementById(id).setAttribute('value',"*" );
  document.getElementById(id).setAttribute('style','background-color:#000055; color:white;font-weight:bold; font-size:large')
  bTab[a][b]=1;
  break
  case 1 :
  document.getElementById(id).setAttribute('value',"?" );
  document.getElementById(id).setAttribute('style','background-color:grey; color:white;font-weight:bold; font-size:large')
  bTab[a][b]=2;
  break
  case 2 :
  document.getElementById(id).setAttribute('value','  ');
  document.getElementById(id).setAttribute('style','background-color:default; font-weight:default; font-size:default')
  bTab[a][b]='"  "';
  break
  }
  }
   
 
  function affichevaleur(a,b,id) {
  document.getElementById(id).setAttribute('value',aTab[a][b]);
  style(aTab[a][b],id);
   }
   
   
document.write("Entrez votre choix :" )
document.write("<FORM NAME='formulaire'>" )
document.write("<INPUT TYPE='radio' NAME='choix' VALUE="+1+"> 10 lignes<BR>" )
document.write("<INPUT TYPE='radio' NAME='choix' VALUE="+2+"> 20 lignes<BR>" )
document.write("<INPUT TYPE=radio NAME='choix' VALUE="+3+"> 30 lignes<BR>" )
document.write("<INPUT TYPE=button NAME=but VALUE='Quel est votre choix ?' onClick='choixprop(formulaire)'>" )
document.write("</FORM> " )
   
   </SCRIPT>  
 
 
 </head>  
 
</html>
</body>

Reply

Marsh Posté le 16-11-2011 à 10:25:59   

Reply

Marsh Posté le 17-11-2011 à 12:32:22    

Bonjour didoa.
 
Tout d'abord qu'est censé afficher ton code ?
Ensuite, est-ce que javascript est activé dans Firefox et IE ?
(Firefox : Outils / Options / onglet Contenu)
(IE : euh...)

Reply

Marsh Posté le 17-11-2011 à 12:51:38    

Bonjour,
 
Oui, javascript est bien activé. Mon code affiche un tableau qui peut avoir un nombre différents de lignes selon le choix de l'utilisateur, puis il doit afficher des choses différentes dans chacune des cases selon que l'on clique ou double clique sur cette case.  
Cordialement

Reply

Marsh Posté le 19-11-2011 à 20:26:29    

Je pense avoir essayé tout ce que je pouvais, mais je n'ai toujours aucune idée de pourquoi ça ne marche pas. Personne pour m'aider ?
 
Merci

Reply

Marsh Posté le 20-11-2011 à 15:52:55    

De un, ton code est crado. J'entends par là que il y a plusieurs fois le tag html, et le body est ouvert trop tôt, etc, ...
Ensuite, tes premier document.write se déclenchent trop tôt, avant que le dom ne soit chargé, ce qui a pour effet d'écraser ton code.

 

Laisses moi un peu de temps, je nettoie et je poste ;)


Message édité par SICKofitALL le 20-11-2011 à 15:53:14

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 20-11-2011 à 16:53:18    

Oui, je suis d'accord, j'ai tout nettoyé, mis les documents.write dans le body html quand c'est possible, mais ça ne marche pas mieux. Merci de ton aide !

Reply

Marsh Posté le 20-11-2011 à 22:11:08    

voilà le code, qui fait la même chose que ce que tu avais avant (je pense du moins :D) :

Code :
  1. <html>
  2. <head>
  3. <title>Démineur</title>
  4. <script type="text/javascript">
  5.  //--------------------------------------------------------------------------------------------------------------
  6.  var aTab,
  7.   bTab,
  9.   //----------------------------------------------------------------------------------------------------------
  10.   genTableau = function (taille)
  11.   {
  12.    //création d'un tableau
  13.    var ta = [],
  14.     tb = [],
  15.     html = [];
  17.    for (var i = 0; i < taille; i++)
  18.    {
  19.     ta[i] = [];
  20.     tb[i] = [];
  21.     for (var j = 0; j < taille; j++)
  22.     {
  23.      ta[i].push (j);
  24.      tb[i].push ("  " );
  25.     }
  26.    }
  28.    //Affichage du tableau
  29.    html.push ("<div style='position: relative; left: 450px;'>" );
  30.     html.push ("<table border='4' cellspacing='2'>" );
  31.     for (var i = 0; i < taille; i++)
  32.     {
  33.      html.push ("<tr>" );
  34.      for (var j = 0; j < taille; j++)
  35.      {
  36.       var id = i + "|" + j; // on "sauve" i et j
  37.       html.push ("<td>" );
  38.        html.push ("<input id='" + id + "' type='button' value='  ' ondblClick='afficheValeur (this)' onclick='afficheCouleur (this)' />" );
  39.       html.push ("</td>" );
  40.      }
  41.      html.push ("</tr>" );
  42.     }
  44.     html.push ("</table>" );
  45.    html.push ("</div>" );
  47.    document.getElementsByTagName ('body')[0].innerHTML = html.join ("" );
  49.    return [ ta, tb ];
  50.   },
  52.  //--------------------------------------------------------------------------------------------------------------
  53.  // fonction pour changer le style
  54.  style = function (val, el)
  55.   {
  56.    switch (val)
  57.    {
  58.     case 0:
  59.      el.setAttribute ('style', 'background-color:#0099FF; color:#66CC00;font-weight:bold; font-size:large');
  60.      break;
  61.     case 1:
  62.      el.setAttribute ('style', 'background-color:#0066FF; color:#FF9933;font-weight:bold; font-size:large');
  63.      break;
  64.     case 2:
  65.      el.setAttribute ('style', 'background-color:#0033FF ; color:#FF6600;font-weight:bold; font-size:large');
  66.      break;
  67.     case 3:
  68.      el.setAttribute ('style', 'background-color:#0000FF; color:#FF3366;font-weight:bold; font-size:large');
  69.      break;
  70.     default:
  71.      el.setAttribute ('style', 'background-color:#000099; color:#FF0000;font-weight:bold; font-size:large');
  72.      break;
  73.    }
  74.   },
  76.  //--------------------------------------------------------------------------------------------------------------
  77.  afficheCouleur = function (el)
  78.   {
  79.    var values = el.id.split ("|" ), // on "retrouve" i et j
  80.     i = values[0],
  81.     j = values[1];
  83.    switch (bTab[i][j])
  84.    {
  85.     case "  ":
  86.      el.value = "*";
  87.      el.setAttribute ('style', 'background-color: #000055; color: white; font-weight: bold; font-size: large');
  88.      bTab[i][j] = 1;
  89.      break;
  91.     case 1:
  92.      el.value = "?";
  93.      el.setAttribute ('style', 'background-color: grey; color: white;font-weight: bold; font-size: large');
  94.      bTab[i][j] = 2;
  95.      break;
  97.     case 2:
  98.      el.value = '  ';
  99.      el.setAttribute ('style', 'background-color: default; font-weight: default; font-size: default');
  100.      bTab[i][j] = '  ';
  101.      break;
  103.     default:
  104.      break;
  105.    }
  106.   },
  108.  //--------------------------------------------------------------------------------------------------------------
  109.  afficheValeur = function (el)
  110.   {
  111.    var values = el.id.split ("|" ), // on "retrouve" i et j
  112.     i = values[0],
  113.     j = values[1];
  115.    el.value = aTab[i][j];
  116.    style (aTab[i][j], el);
  117.   },
  119.  //--------------------------------------------------------------------------------------------------------------
  120.  choixProp = function (btn)
  121.   {
  122.    var taille = 10, // valeur par défaut
  123.     choix = btn.form.choix;
  125.    if (choix[0].checked)
  126.    {
  127.     taille = 10
  128.    }
  129.     else if (choix[1].checked)
  130.     {
  131.      taille = 20
  132.     }
  133.      else if (choix[2].checked)
  134.      {
  135.       taille = 30
  136.      }
  138.    var t = genTableau (taille);
  139.    aTab = t[0];
  140.    bTab = t[1];
  141.   };
  143.  // =============================================================================================================
  144.  window.onload = function ()
  145.   {
  146.    var html = [];
  147.    html.push ("Entrez votre choix :" );
  148.    html.push ("<form name='formulaire'>" );
  150.    for (var i = 1; i <= 3; i++)
  151.    {
  152.     html.push ("<input TYPE='radio' name='choix' value='" + (i * 10) + "' />" + (i * 10) + " lignes" );
  153.    }
  155.    html.push ("<input type='button' name='but' value='Quel est votre choix ?' onClick='choixProp (this)' />" );
  156.    html.push ("</form>" );
  158.    document.getElementsByTagName ('body')[0].innerHTML = html.join ("<br/>" );
  159.   }
  161. </script>
  162. </head>
  163. <body>
  164. </body>
  165. </html>


 
Attention aux variables globales, aux point-virgules en fin de ligne, à la disposition de tes tags, etc...
 
Si t'as un soucis hésites pas ;)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 20-11-2011 à 23:43:11    

Génial !! Merci beaucoup !!!! Je désespérais de trouver une solution à mon problème ! Il ne me reste plus qu'à étudier ce que tu as fait dans le détail et je vais pouvoir en savoir un peu plus sur javascript ! Merci encore

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed