Problème de programme javascript avecfirefox et IE

Résolu

didojava Messages postés 7 Date d'inscription jeudi 15 septembre 2011 Statut Membre Dernière intervention 21 novembre 2011 - 16 nov. 2011 à 13:37
didojava Messages postés 7 Date d'inscription jeudi 15 septembre 2011 Statut Membre Dernière intervention 21 novembre 2011 - 21 nov. 2011 à 18:06

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>

A voir également:

.Setattribute is not a function
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Javascript et base de données - Conseils pratiques -Javascript
Javascript redirect ✓ - Forum PHP
Calendrier javascript - Conseils pratiques -Javascript

12 réponses

Réponse 1 / 12

cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
21 nov. 2011 à 17:51

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>

</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!...

Réponse 2 / 12

Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
16 nov. 2011 à 14:03

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]

Réponse 3 / 12

didojava Messages postés 7 Date d'inscription jeudi 15 septembre 2011 Statut Membre Dernière intervention 21 novembre 2011
16 nov. 2011 à 17:29

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

Réponse 4 / 12

cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
17 nov. 2011 à 11:09

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!...

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 12

didojava Messages postés 7 Date d'inscription jeudi 15 septembre 2011 Statut Membre Dernière intervention 21 novembre 2011
17 nov. 2011 à 12:54

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

Réponse 6 / 12

cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
17 nov. 2011 à 13:37

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!...

Réponse 7 / 12

didojava Messages postés 7 Date d'inscription jeudi 15 septembre 2011 Statut Membre Dernière intervention 21 novembre 2011
17 nov. 2011 à 18:55

Bonsoir,

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

Cordialement,

Réponse 8 / 12

cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
19 nov. 2011 à 23:57

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.

Réponse 9 / 12

didojava Messages postés 7 Date d'inscription jeudi 15 septembre 2011 Statut Membre Dernière intervention 21 novembre 2011
20 nov. 2011 à 08:44

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 !

Réponse 10 / 12

cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
20 nov. 2011 à 09:56

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>

Réponse 11 / 12

didojava Messages postés 7 Date d'inscription jeudi 15 septembre 2011 Statut Membre Dernière intervention 21 novembre 2011
21 nov. 2011 à 17:55

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.

Réponse 12 / 12

didojava Messages postés 7 Date d'inscription jeudi 15 septembre 2011 Statut Membre Dernière intervention 21 novembre 2011
21 nov. 2011 à 18:06

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.

Discussions similaires

Base de données ou API pour programme TV

Partie entiére d'un nombre

integrer une variable javascript dans un lien hypertext

est-ce que "goto" existe en javascript ?

Partie entière d'un nombre

Votre réponse

Discussions similaires