Problème de programme javascript avecfirefox et IE [Résolu]

Signaler
Messages postés
7
Date d'inscription
jeudi 15 septembre 2011
Statut
Membre
Dernière intervention
21 novembre 2011
-
Messages postés
7
Date d'inscription
jeudi 15 septembre 2011
Statut
Membre
Dernière intervention
21 novembre 2011
-
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>

 
<html >
 
 <head>
 
  <title>Démineur</title>
   
  <script type="text/javascript" language=javascript>
   
 
 
 function choixprop(formulaire){
  if (formulaire.choix.checked) { A=10};
  if (formulaire.choix.checked) { A=20};
  if (formulaire.choix.checked) { A=30};
  fonction1()
 }
   
 
 function fonction1(){  
  //création d'un tableau
  aTab=new Array(A);
  for (i=0;i" )
  document.write("\" );
for (i=0; i"+", \" );
}
}

document.write(\"
\" )
 document.write("
</form>
" );
}
   
  // 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){
  case '"  "' :
  document.getElementById(id).setAttribute('value',"*" );
  document.getElementById(id).setAttribute('style','background-color:#000055; color:white;font-weight:bold; font-size:large')
  bTab=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=2;
  break
  case 2 :
  document.getElementById(id).setAttribute('value','  ');
  document.getElementById(id).setAttribute('style','background-color:default; font-weight:default; font-size:default')
  bTab='"  "';
  break
  }
  }
   
 
  function affichevaleur(a,b,id) {
  document.getElementById(id).setAttribute('value',aTab);
  style(aTab,id);
   }
   
   
document.write("Entrez votre choix :" )
document.write("<FORM NAME='formulaire'>" )
document.write(" 10 lignes
" )
document.write(" 20 lignes
" )
document.write(" 30 lignes
" )
document.write("" )
document.write("</FORM> " )
   
   </SCRIPT>  
 
 
 </head>  
 
</html>

12 réponses

Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
En regardant de plus prêt, le tableau tabA est lui aussi inutile, ce qui explique mieux que ce code ai fonctionné sur certains navigateurs qui avaient bon caractère. Je t'envoie un exemple de la page HTML que j'aurais réalisé moi même pour arriver au même résultat. Bien sur, j'utilise des propriétés CSS3 qui ne sont pas connues lorsque l'on débute avec HTML/Javascript/CSS.
Voici le code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>Démineur</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
table.tabJeu
{
background-color:grey;
border-radius:7px;
-moz-border-radius:5px; /* Firefox 3.6 et précédents */
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
width:300px;
}

.formsel
{
font-family:verdana,arial,sans-serif;
font-size:8pt;
color:darkblue;
background-color:silver;
}

label.playA
{
font-family:verdana,arial,sans-serif;
font-size:10pt;
font-weight:bold;
color:red;
background-color:silver;
}

label.playB
{
font-family:verdana,arial,sans-serif;
font-size:10pt;
font-weight:bold;
color:blue;
background-color:silver;
}

td.cellgrid
{
width:30px;
cursor:pointer;
font-family:verdana,arial,sans-serif;
font-size:8pt;
font-weight:bold;
background-color:silver;
text-align:center;
}

td.cellplayA
{
width:30px;
cursor:default;
font-family:verdana,arial,sans-serif;
font-size:8pt;
font-weight:bold;
color:red;
background-color:lightpink;
text-align:center
}

td.cellplayB
{
width:30px;
cursor:default;
font-family:verdana,arial,sans-serif;
font-size:8pt;
font-weight:bold;
color:blue;
background-color:aquamarine;
text-align:center;
}
</style>
<script type="text/javascript">
function createGrid() {
var n=0;
var m=0;
var selGridId=document.getElementById("griddim").selectedIndex;
var nbrows=document.getElementById("griddim").options[selGridId].value;
var nbcols=nbrows;
//Recherche du tableau HTML de la grille d'affichage
if (document.getElementById("tabgrid")!=null) {//Si la grille existe elle est vidée
var tabgrid=document.getElementById("tabgrid");
for (n=tabgrid.rows.length-1;n>=0;n--) {
tabgrid.deleteRow(n);
}
}
else {//Sinon elle est créé
var rowAffGrid=document.getElementById("tabJeu").insertRow(1);//Ajout d'une ligne dans le tableau principal
var cellAffGrid=rowAffGrid.insertCell(0);//Ajout d'une cellule d'affichage dans la ligne créée
cellAffGrid.colSpan=2;//La cellule s'étend sur toute la largeur du tableau principal
var tabgrid=document.createElement("table");//Création du tableau HTML destiné à l'affichage de la grille de jeu
with (tabgrid) {
width="100%";
id="tabgrid";
cellSpacing=1;
}
cellAffGrid.appendChild(tabgrid);//Ajout du tableau HTML aux noeuds enfants de la cellule d'affichage
}
document.getElementById("tabJeu").style.width=eval(nbrows*30)+"px";//redimensionnement en largeur
//Remplissage du tableau
for (n=0;n<nbrows;n++) {
var rowGrid=tabgrid.insertRow(n);
rowGrid.style.height="25px";
for (m=0;m<nbcols;m++) {
var cellGrid=rowGrid.insertCell(m);
var idCell=n+"_"+m;
with (cellGrid) {
id=idCell;
title="L"+(n+1)+"C"+(m+1);
innerHTML=" ";
className="cellgrid";
}
document.getElementById(idCell).setAttribute("onclick","selCellGrid('"+idCell+"')");
}
}
document.getElementById("playA").checked="checked";//Le premier joueur prend la main par défaut
}

function selCellGrid(id) {
//Sélection du joueur
if (document.getElementById("playA").checked) {
var player="A";
}
else {
var player="B";
}
var cellplay=document.getElementById(id);
if (player=="A") {
with (cellplay) {
className="cellplayA";
innerHTML="X";
}
document.getElementById("playB").checked="checked";//Le deuxième joueur prend la main
}
else if (player=="B") {
with (cellplay) {
className="cellplayB";
innerHTML="O";
}
document.getElementById("playA").checked="checked";//Le premier joueur prend la main
}
cellplay.removeAttribute("onclick");//Après un jeu, la cellule devient inactive
}
</script>
</head>

<form id=\"selgrid\">
----

<table id="affselgrid" width="100%">
----,
<label for=\"griddim\">Grille de Jeu :</label>

<select id=\"griddim\">
<option value=\"10\">10 x 10</option>
<option value=\"20\">20 x 20</option>
<option value=\"30\">30 x 30</option>
</select>
</td>
,

----

<label for="playA" class="playA">Joueur A ► X</label>,
<label for="playB" class="playB">Joueur B ► O</label>

</td>
</tr>
</form>
<!-- Espace réservé à la grille d'affichage -->
</table>

</html>

PS : Lorsque la réponse à ton problème te paraîtra apportée, il serait bon de cocher la case réponse acceptée. Merci!...
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
Bien le bonjour, sure que ça fonctionne sur chrome (testé sur chrome 15 et il me dit plein de chose pas très gentille )
.
la correction est très simple car il manque une déclaration pour la variable A.
avant la fonction
function choixprop(formulaire)


il suffit de rajouter:
var A;


sinon, il est aussi (et cela est plus propre) de la déclarée dans la fonction
function choixprop(formulaire)
et de la transmettre à la fonction
fonction1()
comme paramètre :
fonction1(A)
.
Cela est plus propre car, du coup ce n'est pas une variable globale.



[o-_-o]
Messages postés
7
Date d'inscription
jeudi 15 septembre 2011
Statut
Membre
Dernière intervention
21 novembre 2011

Bonjour,

Ca marche sans problème chez moi avec Chrome (15.0.874.120) et il ne me signale aucune erreur. Par contre, même en déclarant cette variable A et en la passant en paramètre, ça ne marche pas sur firefox et IE (je ne pense pas que le problème soit le même pour les deux d'ailleurs). J'avais déjà essayé en fait, j'ai aussi déjà essayé de changer les majuscules en minuscules, de supprimer tous les espaces inutiles, ce genre de choses, mais rien n'y fait.

Cordialement
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
Il existe un addOn de Firefox : Firebug qui permet de débugger les scripts Javascript, vous devriez l'utiliser pour faire apparaître les erreurs décelées.
Bon courage!...
Messages postés
7
Date d'inscription
jeudi 15 septembre 2011
Statut
Membre
Dernière intervention
21 novembre 2011

Bonjour,

J'ai déjà firebug, il me dit "affichevaleur is not defined" ou "affichecouleur is not defined". Ce qui hélas ne m'aide pas du tout.

Cordialement
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
Dans le code HTML que vous utilisez, il y a un empilement qui me gène beaucoup :
Je lis :
<html>

<html>
<head>
<title>...</title>
<script>
...
</script>
</head>
</html>

</html>

On ne doit normalement pas utiliser ce type d'insertion, il faudrait :
<html>
<head>
</head>

eventuellement pour insérer un autre document

</html>

Firefox qui se réfère à l'élément <html> parent ne trouve pas les fonctions auxquelles vous faites appel dans la section <head> de celui ci. Il envoie donc l'erreur "affichevaleur is not defined" ou "affichecouleur is not defined".

D'autre part, les normes HTML4 et HTML5 :
-> n'acceptent plus les noms de balises et d'attributs en majuscules,
-> n'acceptent plus les valeurs d'attributs qui ne sont pas encadrées par des parenthèses,
-> insèrent un signe de fin pour les balises d'éléments vides
au lieu de


Si cela peut aider!...
Messages postés
7
Date d'inscription
jeudi 15 septembre 2011
Statut
Membre
Dernière intervention
21 novembre 2011

Bonsoir,

Merci de votre réponse. J'ai nettoyé mon code, mais ça ne marche pas mieux.

Cordialement,
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
Voici ton code entièrement réécrit et cela fonctionne sur Firefox et les autres navigateurs :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Démineur</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
//Déclaration des tableaux en variables globales
var aTab=new Array();
var bTab=new Array();

function choixprop(){
var formulaire=document.getElementById("formulaire");
var A=0;
var n=0;
for (n=0;n<3;n++) {
if (formulaire.elements[n].checked) {
A=formulaire.elements[n].value;
break;
}
}
fonction1(A);
}

function fonction1(A){
//Remplissage des tableaux
var n=0;
var j=0;
if (aTab.length>0) {//suppression des éléments des tableaux précédemment utilisés
for (n=aTab.length-1;n>=0;n--) {
for (j=9;j>=0;j--) {
aTab[n].pop(j);
bTab[n].pop(j);
}
aTab.pop(n);
bTab.pop(n);
}
}
for (n=0;n0) {
for (n=(tabaff.rows.length-1);n>=0;n--) {
tabaff.deleteRow(n);
}
}
//Remplissage du tableau HTML en fonction du nombre de lignes choisi.
for (n=0;n";
}
}
}
// 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,arB){
var indexes=id.split("_");
var n=indexes[0];
var j=indexes[1];
switch (arB){
case " " :
document.getElementById(id).setAttribute("value","X" );
document.getElementById(id).setAttribute("onclick","affichecouleur("+a+","+b+",'"+id+"','1')" );
document.getElementById(id).setAttribute("style","background-color:#000055; color:white;font-weight:bold; font-size:large");
break;
case "1" :
document.getElementById(id).setAttribute("value","O" );
document.getElementById(id).setAttribute("onclick","affichecouleur("+a+","+b+",'"+id+"','2')" );
document.getElementById(id).setAttribute("style","background-color:grey; color:white;font-weight:bold; font-size:large");
break;
case "2" :
document.getElementById(id).setAttribute("value"," ");
document.getElementById(id).setAttribute("onclick","affichecouleur("+a+","+b+",'"+id+"',' ')" );
document.getElementById(id).setAttribute("style","background-color:default; font-weight:default; font-size:default");
break;
}
}


function affichevaleur(a,b,id,arA) {
document.getElementById(id).setAttribute("value",arA);
style(arA,id);
}
</script>
</head>

Entrez votre choix :


<form id="formulaire">
10 lignes

20 lignes

30 lignes


</form>


<form name="form">


</form>



</html>

Pour écrire un code correct, j'ai effectué les modifications suivantes :
* J'ai ajouté une déclaration <DOCTYPE> en début de document.
* J'ai ajouté des index lors du remplissage des tableaux. Sinon, Javascript ne sait pas à quel élément affecter des valeurs.
* Je vide le contenu des tableaux avant chaque nouvelle modification du nombre de lignes de la grille.
* J'ai utilisé la collection elements de l'objet DOM form pour déterminer quel bouton radio a été sélectionné.
* J'ai utilisé les méthodes insertRow() et deleteRow() de l'objet DOM table pour ajouter ou supprimer des lignes au tableau HTML.
* J'ai utilisé la méthode insertCell() de l'objet DOM tableRow pour ajouter des cellules.
* Je modifie le contenu de l'attribut onclick de la cellule cliquée pour lui attribuer sa nouvelle valeur.
Messages postés
7
Date d'inscription
jeudi 15 septembre 2011
Statut
Membre
Dernière intervention
21 novembre 2011

Formidable ! Merci beaucoup, je désespérais de trouver quelqu'un pour m'aider ! Maintenant, je n'ai plus qu'à comprendre ce que tu as fait, ce qui me permettra d'en savoir un peu plus sur javascript !

Merci encore et bon dimanche !
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
Au début on essaye de faire fonctionner, ensuite on simplifie en enlevant le code inutile.
J'ai donc supprimé le tableau bTab qui ne sert à rien.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Démineur</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
//Déclaration du tableau en variable globale
var aTab=new Array();

function choixprop(){
var formulaire=document.getElementById("formulaire");
var A=0;
var n=0;
for (n=0;n<3;n++) {
if (formulaire.elements[n].checked) {
A=formulaire.elements[n].value;
break;
}
}
fonction1(A);
}

function fonction1(A){
//Remplissage des tableaux
var n=0;
var j=0;
if (aTab.length>0) {//suppression des éléments des tableaux précédemment utilisés
for (n=aTab.length-1;n>=0;n--) {
for (j=9;j>=0;j--) {
aTab[n].pop(j);
}
aTab.pop(n);
}
}
for (n=0;n0) {
for (n=(tabaff.rows.length-1);n>=0;n--) {
tabaff.deleteRow(n);
}
}
//Remplissage du tableau HTML en fonction du nombre de lignes choisi.
for (n=0;n";
}
}
}
// 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,arB){
switch (arB){
case 0 :
document.getElementById(id).setAttribute("value","X" );
document.getElementById(id).setAttribute("onclick","affichecouleur("+a+","+b+",'"+id+"',1)" );
document.getElementById(id).setAttribute("style","background-color:#000055; color:white;font-weight:bold; font-size:large");
break;
case 1 :
document.getElementById(id).setAttribute("value","O" );
document.getElementById(id).setAttribute("onclick","affichecouleur("+a+","+b+",'"+id+"',2)" );
document.getElementById(id).setAttribute("style","background-color:grey; color:white;font-weight:bold; font-size:large");
break;
case 2 :
document.getElementById(id).setAttribute("value"," ");
document.getElementById(id).setAttribute("onclick","affichecouleur("+a+","+b+",'"+id+"',0)" );
document.getElementById(id).setAttribute("style","background-color:default; font-weight:default; font-size:default");
break;
}
}


function affichevaleur(a,b,id,arA) {
document.getElementById(id).setAttribute("value",arA);
style(arA,id);
}
</script>
</head>

Entrez votre choix :


<form id="formulaire">
10 lignes

20 lignes

30 lignes


</form>


<form name="form">


</form>



</html>
Messages postés
7
Date d'inscription
jeudi 15 septembre 2011
Statut
Membre
Dernière intervention
21 novembre 2011

Encore merci pour tout ce temps que tu as consacré à mon problème,je n'ai pas eu le temps de regardé ce que tu as fait, mais nul doute que je vais apprendre beaucoup !
Je coche de suite.
Messages postés
7
Date d'inscription
jeudi 15 septembre 2011
Statut
Membre
Dernière intervention
21 novembre 2011

En fait ton dernier programme ne fait pas ce que j'avais prévu (affichage du numéro de la colonnes en cas de double clique (ce qui n'est pas réellement ce que je veux faire, mais j'avais simplifié pour poster ma question), mais c'est vraiment beaucoup plus joli en tout cas, je vais voir comment l'adapter pour que ça fasse vraiment ce que je veux.